解决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 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
Vue和React有哪些区别
Sep 12 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数组中的重复值的实现代码
2011/07/17 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
JS之小练习代码
2008/10/12 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
简单介绍Python中的JSON使用
2015/04/28 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
Python_LDA实现方法详解
2017/10/25 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
10个Python小技巧你值得拥有
2018/09/29 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
django框架创建应用操作示例
2019/09/26 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
python中数字是否为可变类型
2020/07/08 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
企业文明单位申报材料
2014/05/16 职场文书
求职信内容怎么写
2014/05/26 职场文书
学生犯错保证书
2015/05/09 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书