vue 监听scroll事件 进入另一页面后,返回时保持在原来位置
在项目中,比如首页较长是需要scroll的,进入到另一页面后,返回时默认在首页原来的位置思路:这个主要是vue监听滚动事件,监听到进入之前的滚动条并保存下来,切换回来时再取出来进行赋值就可以了。步骤:1)利用vue的@scroll事件对整个页面进行监听2)保存滚动条的值用的是sessionstorage,这个最合适了,又能暂存下来,又可以随着浏览器的关闭而清除掉3)最后就是用钩子...
·
在项目中,比如首页较长是需要scroll的,进入到另一页面后,返回时默认在首页原来的位置
思路:
这个主要是vue监听滚动事件,监听到进入之前的滚动条并保存下来,切换回来时再取出来进行赋值就可以了。
步骤:
1)利用vue的@scroll事件对整个页面进行监听
2)保存滚动条的值用的是sessionstorage,这个最合适了,又能暂存下来,又可以随着浏览器的
关闭而清除掉
3)最后就是用钩子函数进行操作了:
离开组件时beforeRouteLeave(to, from, next)
进入组件时mounted或者beforeRouteEnter( to, from, next )都可以,
如果组件设置了缓存,那mounted是不会执行的,可以用activated
代码:
<div id="box" @scroll="getTop"></div>
<script src="text/javascript">
export default {
data(){
return{
boxTop: null, // 要监听的scrollTop值
}
},
mounted(){
// 页面不缓存时写这里
},
activated(){
// 设置缓存时写这里
this.setTop()
},
beforeRouteLeave(to, from, next){
this.saveData()
next()
},
methods: {
// 在盒子上的监听事件
getTop(){
let box = document.getElementById(“box");
this.boxTop= box.scrollTop;
},
// 离开组件时调用 保存获得的值
saveData(){
sessionStorage.boxTop = this.boxTop;
},
// 进入组件时调用 设置当前页面的top值
setTop (){
let top = sessionStorage.boxTop;
if (!top) top = 0; // 如果top值为undefined 或者null 或者本身就是0时 设置为0
document.getElementById("box").scrollTop = top;
}
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)