解决Vue页面固定滚动位置的处理办法


Posted in Javascript onJuly 13, 2017

最近做项目遇到一个问题,就是Vue滚动不固定,网上找了一些资料,说下 vue 固定滚动位置的处理办法.

问题描述:

通常见于 列表页List -> 详情页Detail 的情况, 从列表的某一项x 进入到详情页, 再返回的时候, 希望列表的位置固定在x, 而不是回到顶部了.

vue-router 里面是有一个 scrollBehavior 的, 但是这个玩意只能在 history 模式下面使用, 而我用的 hash 模式.

所以我们要自己实现嘛, 思路简单:List 里面监听滚动, 记录滚动位置 pos, 从 Detail 返回到 List 里面的时候, 读取 pos.

mounted () {
  // 读
  setTimeut(function(){
   document.body.scrollTop = parseInt(sessionStorage.getItem('pos'));
  }, 1000);
  // 存
  window.onscroll = function () {
   sessionStorage.setItem('pos', document.body.scrollTop);
  }
 }

遇见了一个问题:

每次返回 List, 都是直接滚动到顶部, 每次都是, 每次都是! 把 pos 打印出来, 发现是 0, 而不是我们所存的值. 日了, 明明切换之前还是的, 回来就不是了.

然后发现了路由每次切换都会触发 onscroll 事件, 日了狗, 为毛.我都没有滚动页面, 为什么会触发 onscroll 事件。

刚开始怀疑 hash 变化会导致 onscroll 事件的触发, 所以我就在浏览器里面手动输入了几个不存在的路由:

/foo
/bar

没有发现 scroll 被触发, 所以这个嫌疑排出.

然后怀疑 vue-router 里面是不是绑定了 scroll 事件, 没发现然后又想, 没绑定 scroll 事件, 那么修改 scrollTop 值会不会也触发 scroll 事件.

好吧还发现新知识点了:

scrollTop 值的改变, 的确会触发 scroll 事件.

那么我就想, 是不是 vue-router 里面存在修改 scrollTop 值的行为, 也没有发现.

然后我又想, 数据是动态渲染的, 所以是不是和元素的增删改查相关。

元素增加-> 页面高度变了 -> 页面高度变化, 也触发 scroll 事件?

所以我用 vue-cli 新建了项目, 放了两个没有增删改查的路由

然后日了狗的, 我看见从 foo -> bar -> foo, 的时候, foo的滚动条位置还在之前我滚动到的地方.

突然想起来浏览器是可以自己记录滚动条位置的.

是不是浏览器干的?

从详情页返回到列表页面, 列表会重新渲染, 时序大概是这样:
返回列表页 1
渲染页面   2

而浏览器恢复滚动条的位置的操作, 是在 1 和 2 之间, 这个时候就出问题了:如果你页面上面的数据都是渲染出来的, 浏览器就会发现:

页面的高度<=屏幕的高度, 不存在滚动条, 此时 document.body.scrollTop = 0;
所以会设置 document.body.scrollTop = 0
修改了 document.body.scrollTop 触发了 scroll 事件, scroll 里面又重写了 pos

等你数据渲染结束之后, 读到的就是 0了.

如果发现你页面高度大于屏幕高度, 但是页面高度是 n, 而 pos 的值是: n + x, 比当前页面的最大的 scrollTop 值还大, 这个时候, document.body.scrollTop 的值就会等于 n.
当你的数据渲染结束, 开始定位, 日了, 没定准.

所以我们要解决这个问题.

当然是想到了 keep-alive, 刚启用的时候, 发现的确不错. 但是同时也发现:

列表项目靠前的, 往返操作的定位都很准, 越往后越不行, 直接拉到底, 再返回发现定位到的一般都是第二个第三个列表项目.

所以这个就很有意思了, 我大概猜测了一下浏览器的滚动位置恢复行为:

当 hashchange 的时候。拿到当前页面的 document.body.scrollTop 值, 和自己存储的滚动条位置。二者取最小的值, 设置成当前的 document.body.scrollTop 的值, 当使用 keep-alive 的时候, 因为 hashchange 事件处理和页面渲染是并行的, 所以有时hashchange 拿到的 document 的高度是已经渲染过几个元素的高度, 这个就是为什么定不准的原因.

好吧, 现在的情况是:

keep-alive 定不准, 不可靠, 所以需要我们自己来重新定位.

ok, 1 先绑定 scroll 事件:

var map = {};
 window.onscroll = function() {
  map[location.hash] = document.body.scrollTop;
 }

2 再屏蔽掉浏览器自动恢复滚动位置行为带来的影响

a 在 hashchange 时强制 document.body.scrollTop = 0

b 在 scroll 事件里面, 当 document.body.scrollTop = 0 的时候不做 存操作.

var map = {};
 window.onhashchange = function() {
  document.body.scrollTop = 0;
 }
 window.onscroll = function() {
  if (document.body.scrollTop) {
   // 存
   map[location.hash] = document.body.scrollTop;
  } else {
   // 读
  }
 }

3 在读操作里面, 设置一个定时任务, 去判断 document.body.scrollTop 的值和你保存的位置是不是相同的

var map = {};
 window.onhashchange = function() {
  document.body.scrollTop = 0;
 }
 window.onscroll = function() {
  if (document.body.scrollTop) {
   // 存
   map[location.hash] = document.body.scrollTop;
  } else {
   var timer = null;
   timer = setInterval(function(){
    if (document.body.scrollTop == map[location.hash]) {
     clearInterval(timer);
    } else {
     document.body.scrollTop = map[location.hash];
    }
   }, 20);
  }
 }

到这里实际上已经大体实现了, 返回恢复滚动条位置的功能, 而上面的代码需要更多的优化,

具体代码见:项目地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript的一种模块模式
Mar 22 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
js控制table合并具体实现
Feb 20 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
Javascript动画效果(3)
Oct 11 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 #Javascript
Angular如何引入第三方库的方法详解
Jul 13 #Javascript
详解如何构建Angular项目目录结构
Jul 13 #Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 #Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 #Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 #Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 #Javascript
You might like
php中用文本文件做数据库的实现方法
2008/03/27 PHP
PHP数组实例总结与说明
2011/08/23 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
php实现的漂亮分页方法
2014/04/17 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
python使用socket进行简单网络连接的方法
2015/04/29 Python
Python排序算法实例代码
2017/08/10 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
django解决订单并发问题【推荐】
2019/07/31 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
python适合做数据挖掘吗
2020/06/16 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
银行个人求职自荐信范文
2013/12/16 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers