vue中关于滚动条的那点事

不知道你有没有遇到过这种情况,有时当页面切换时,滚动条不在页面的顶端。最近半路加入一个项目,就遇到这种情况。(若只是为了解决此问题,可直接翻到最下方)下面谈谈解决此问题的过程:

什么情况下会出现滚动条的缓存?

之前想要滚动条在页面跳转时被缓存,需要自己设定keep-alive,

<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

并且需要在路由中设定meta属性

 export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 需要被缓存
}
}
]
})

在router的生命周期的钩子函数中获取当前滚动条位置,并将其存储起来

beforeRouteLeave(){
...//获取滚动条位置,并将其存储
}

在进入路由之前获取存储位置

beforeRouteEnter(){
...//获取滚动条位置,并将其赋值
document.body.scrollTop = ...
}

但是在我的这个项目中并没有设置keep-alive。然后就找了度娘,度娘中的小伙伴给出了解决方案,就是在vue官方文档vue-router中的 滚动行为

scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}

对于所有路由导航,简单地让页面滚动到顶部。

返回 savedPosition,在按下 后退/前进 按钮时,就会像浏览器的原生表现那样:

scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}

如果你要模拟“滚动到锚点”的行为:

scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}

但是文档中明确表示,这个功能只在支持 history.pushState 的浏览器中可用。还有一个但是,也是vue官方文档的原话:vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

也就是说,不能拿来就用。

这可如何是好???

(此处省略一万字。。。)

接下来就是此次的重点了。。。。

在尝尽各种能想到的办法之后,就忽然想到一个简单粗暴的解决方案,直接代码:

watch: {
'$route' (to,from){
document.querySelector('.main').scrollTop = 0 //.main是本项目中overFlow:auto的盒子
}
}

在写有的文中设置监听,当路由改变时重置滚动条高度。

总结一下:

  • 首先要看一下是否有写keep-alive
  • 找出设置overFlow:auto的元素
  • 设置监听属性

小编不才,如有言语不当或表述不清,勿喷,

如言语有误,望路过大神指点,不胜感谢!!!

vue中关于滚动条的那点事的更多相关文章

  1. vue 中监测滚动条加载数据(懒加载数据)

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  2. vue中修改滚动条样式

    这是一个在VUE中的设置滚动条样式的方法,该方法只适用于Chrome浏览器,亲测在火狐不适用 样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就 ...

  3. vue 中<vue-scroll >滚动条回到顶部

    今天项目碰到一个<vue-scroll >滚动条要回到顶部的需求,查询了好久终于解决了,这里记录一下: 其实就是scrollIntoView()方法的使用(官方文档): 需要注意的是要求页 ...

  4. 关于 Vue 中 我对中央事线管理器的(enentBus)误解

    由于这段时间公司比较闲,就对vue 中的一些模糊的点做了一些加强,突然就想到了常挂在嘴边兄弟组件传值 我理解的兄弟组件的传值是可以跨理由传值的,比如我从http://localhost:8080/lo ...

  5. vue中动态引入图片为什么要是require, 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  6. axios在vue中的简单配置与使用

    一.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:https://hzzly.github.io/2017/03/12/ ...

  7. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  8. 基于iscroll的better-scroll在vue中的使用

    什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强 ...

  9. vue中嵌套页面(iframe)

    vue中嵌套iframe,将要嵌套的文件放在static下面.(要将打包文件整体放在statici里,我的文件名是canvas) src可以使用相对路径,也可使用服务器根路径http:localhos ...

随机推荐

  1. 04_枚举类型iota

    iota是枚举类型的关键字,使用iota可以方便快捷的给常量赋值,主要体现在以下几个方面:1.iota常量自动生成器,每个一行加12.iota给常量赋值使用3.iota遇到const重置为04.可以写 ...

  2. 【原创】Linux Suspend流程分析

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  3. 噩梦(双向BFS)

    给定一张N*M的地图,地图中有1个男孩,1个女孩和2个鬼. 字符“.”表示道路,字符“X”表示墙,字符“M”表示男孩的位置,字符“G”表示女孩的位置,字符“Z”表示鬼的位置. 男孩每秒可以移动3个单位 ...

  4. Asp.net之MsChart控件动态绑定温度曲线图

    <div> <div style="position: absolute; z-index: 200; background-color: #FFFFFF; height: ...

  5. IDEA maven使用tomcat7插件启动报错:A child container failed during start

    使用maven的tomcat7插件启动项目时出现上面的错误:A child container failed during start, 出现这个问题的原因是导入了servlet-api包,与tomc ...

  6. .NET敏感信息分离托管 娓娓道来

    引言 互联网每隔一段时间就会爆出 [某程序猿在代码托管平台上传了公司机密配置信息,导致公司核心数据被黑客获取或修改], 一茬又一茬背锅侠层出不穷. 软件工程理论早以加粗字体给出 经典原则:Never  ...

  7. vmware上安装的ubuntu连接不上网络

    解决方法如下: 1.右键点击ubuntu,选择“设置” 2.网络适配器设置为“仅主机模式”:与主机共享的专用网络.点击“确定”即可.

  8. cogs249 最长公共子串(后缀数组 二分答案

    http://cogs.pro:8080/cogs/problem/problem.php?pid=pxXNxQVqP 题意:给m个单词,让求最长公共子串的长度. 思路:先把所有单词合并成一个串(假设 ...

  9. POJ2084 Game of Connections 卡特兰数 关于卡特兰数经典的几个问题

    Game of Connections Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 9128   Accepted: 44 ...

  10. Educational Codeforces Round 68 Editorial

    题目链接:http://codeforces.com/contest/1194                                            A.Remove a Progre ...