vue 监听scroll事件 进入另一页面后,返回时保持在原来位置

5 篇文章 0 订阅

在项目中,比如首页较长是需要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>
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值