Vue页面滚动条复原问题
解决Vue单页面滚动条问题今天工作时遇到了一个问题,Vue页面切换时,滚动条维持在前一个页面的状态,也就是滚动条没有归零。其实这个问题在Vue路由跳转时解决了这个问题。在activated钩子函数中将滚动条清零就可以了。let dom = document.getElementById(id);if (dom != null) {if (dom.scr...
·
解决Vue单页面滚动条问题
今天工作时遇到了一个问题,Vue页面切换时,滚动条维持在前一个页面的状态,也就是滚动条没有归零。其实这个问题在Vue路由跳转时解决了这个问题。在activated钩子函数中将滚动条清零就可以了。
let dom = document.getElementById(id);
if (dom != null) {
if (dom.scrollTop > 0) {
dom.scrollTop = 0;
}
}
这样在切换页面时,就可以保障滚动条在最顶端。
最近对项目进行了简化,将项目修改为使用一个模板切换多个界面,其实就是单页面。这个时候原来使用路由的方式被弃用了,因此最近又发现了滚动条的问题。我想了几种解决方案。
一、使用created函数
我是这样想的,既然要保证滚动条在顶端,那就在页面挂载之前把滚动条归零。在实践之后,发现这个方案是行不通的,因为在created函数中获取不到元素,因此这个方案失败。
二、在切换页面的方法中将滚动条设为0
其实一开始就该想到问题的源头在这。
let dom = document.querySelector('#id')
if(dom!==null){
dom.scrollTop = 0;
}
就是这么简单,解决了滚动条问题。
更多推荐
已为社区贡献5条内容
所有评论(0)