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

最近做项目遇到一个问题，就是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 事件"htmlcode">

 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);
  }
 }

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

具体代码见:项目地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。