scrollTop记录滚动位置

最新推荐文章于 2024-08-15 09:43:14 发布

Iohboel

最新推荐文章于 2024-08-15 09:43:14 发布

阅读量6.2k

点赞数

分类专栏： Vue.js 笔记

本文链接：https://blog.csdn.net/Iohboel/article/details/78459313

版权

本文介绍了在Vue.js应用中记录和恢复滚动位置的方法，特别是在hash模式下。利用vue-router的scrollBehavior方法在history模式下可行，但作者采用hash模式，于是通过监听scroll事件并在页面离开和返回时保存及设置scrollTop值。文中详细讨论了不同浏览器的scrollTop获取差异，并提供了兼容性处理。此外，还讲述了在iOS设备上的问题及解决方案，包括使用keep-alive的限制和手动绑定与解除scroll事件的策略。

摘要由CSDN通过智能技术生成

前文提到，需要记录滚动位置，

vue-router提供了一个方法 scrollBehavior，但是这个方法必须要在history模式下才能使用，具体参考文档

使用的方式如下

const scrollBehavior = (to, from, savedPosition) => {
if (savedPosition) {
setTimeout(() => {
window.scrollTo(savedPosition.x, savedPosition.y)
}, 200)
}
}

export default new VueRouter({
mode: 'history',
scrollBehavior,
routes: [{....}]
}]

但是我采用的是hash模式，这个方法便不能采用了，只能采用其他的方案。

笔者的思路是给滚动事件添加监听，在离开页面的时候纪录当时的scrollTop，在返回页面的时候设置scrollTop值为离开的时候的纪录值。

首先要拿到scrollTop的值，

由于存在兼容性问题，在拿到scrollTop的值的时候需要考虑各种情况。网上也有各种解决方案

各浏览器下 scrollTop的差异
IE6/7/8：
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度；
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop；
Safari:
safari 比较特别，有自己获取scrollTop的函数： window.pageYOffset ；
Firefox:
火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；

获取scrollTop值
完美的获取scrollTop 赋值短语：
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
通过这句赋值就能在任何情况下获得scrollTop 值。
仔细观察这句赋值，你发现啥了没？？
没错，就是 window.pageYOffset (Safari) 被放置在 || 的中间位置。
因为当数字0 与 undefine 进行或运算时，系统默认返回最后一个值。即或运算中 0 == undefine ;
当页面滚动条刚好在最顶端，