解决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 相关文章推荐
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
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 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Django Highcharts制作图表
2016/08/27 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
Python爬豆瓣电影实例
2018/02/23 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
python判断变量是否为列表的方法
2020/09/17 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
讲文明懂礼貌演讲稿
2014/09/11 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
PyTorch中的torch.cat简单介绍
2022/03/17 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers