vue记录滚动条位置,
本文主要介绍vue3使用store记录滚动位置的例子，帮助大家更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
总体效果监控容器滚动事件存储中的配置在页面跳回时获取滚动位置。最后的
整体效果
在首页列表滚动时进入详情页后，切换回首页时可以导航到上一个浏览位置。
监听容器滚动事件
定义一个滚动事件，并将其绑定到容器的滚动事件。我在这里做了一些节流。
const savePosY=()={
if(state.timer)返回；
state.timer=setTimeout(()={
let node=document.querySelector(。content wrapper’)；
//记录滚动位置
store.commit(setY ，node.scrollTop)
state.timer=null
clear time out(state . timer)；
},100)
获取已装载的容器绑定事件。
onMounted(()={
let content wrapper=document . query selector(。content wrapper’)；
content wrapper . addevent listener( scroll ，save posy)；
})
store中的配置
存储相对简单，只包含一种状态：y和突变：setY。
导出默认值{
状态：{
y:0
},
突变：{
setY(状态，值){
state.y=值；
}
}
}
在页面跳回时获取滚动位置
同样，在onMounted中操作，否则无法获取容器元素，而且由于vue中的dom是异步渲染的，我们需要在nextTick中操作才能有效。
next tick(()={ content wrapper . scroll top=store . state . y；})
最后
这就是本文的全部内容。如有不妥或更好的方法，欢迎交流指出。
这就是vue3使用store记录滚动位置的例子的细节。更多关于vue实现滚动位置的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。