本文讲述了在Vue项目中，如何处理列表页到详情页再返回时保持滚动位置的问题。作者发现Vue的`scrollBehavior`仅适用于history模式，而在hash模式下，浏览器的滚动位置恢复机制会导致定位失败。通过监听滚动事件，存储和读取滚动位置，并在`hashchange`时屏蔽浏览器的默认行为，实现了自定义滚动定位。最终的解决方案包括在`hashchange`时重置滚动位置，以及在`onscroll`事件中判断并设置正确的滚动位置。
最近做项目遇到一个问题，就是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 事件的触发, 所以我就在浏览器里面手动输入了几个不存在的路由:
最低0.47元/天 解锁文章
扫一扫
833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
