位置: IT常识 - 正文
vue中记录滚动条位置(vue 滚动条)
发布时间：2024-01-15vue中记录滚动条位置 1、方法一
本文链接地址:https://www.jiuchutong.com/zhishi/296204.html
转载请保留说明！
推荐整理分享vue中记录滚动条位置(vue 滚动条)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue怎么拿到滚动条的位置,vue 滚动条,vue滚动到指定位置,有滚动效果,vue记录滚动条位置,vue 记录滚动位置,vue页面滚动事件,vue数据滚动显示,vue数据滚动显示,内容如对您有帮助，希望把文章链接给更多的朋友！
在点击的时候记录滚动条位置，存入本地 再次进入该路由读取滚动跳位置
1、1 跳转时路由存入scroll如果要有多个页面，可以把名称也存进去，这里默认一个页面 methods: { go() { console.log(document.documentElement.scrollTop) localStorage.setItem("scroll", document.documentElement.scrollTop) this.$router.push({path: '/'}) } }复制代码1、2 读取scroll位置再次进入该路由时从本地录取scroll位置利用scrollBehavior ,在router/index.js中，配置路由中的scrollBehaviors事件
const router = new VueRouter({ mode: 'hash', routes, scrollBehavior(to, from){ if(to.name==='fatherSlot'){ //name为路由名字 return {x:0, y: parseInt(localStorage.getItem('scroll'))}//读取本地的scroll } console.log("to",to,"from",from) }})复制代码2、方法二利用vue的keep-alive , 使用缓存机制来记录滚动条位置 但是有个缺点，页面刷新后就不记录了，但是简单高效
2、1 配置需要缓存的路由缓存pageA,pageB,里面代码都一样，如演示图一样。pageA,pageC为组件的名字.html
<keep-alive :include="['pageA','pageC']"> <router-view/> </keep-alive>复制代码2、2 在路由内记录滚动位置javascript
data() { return { curScrollTop: 0 //记录滚动条位置对象 } }, //此钩子函数会反复触发,是keep-alive特有的钩子函数，取 activated() { document.documentElement.scrollTop = this.curScrollTop || 0 }, //路由离开时的钩子函数,存 beforeRouteLeave (to, from, next) { this.curScrollTop = document.documentElement.scrollTop || 0 next() },上一篇：html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript(html5旅游网页设计)
下一篇：前端技术搭建飞机大战小游戏（内含源码）(前端工程搭建)
