Vue重构项目时对document.body.scrollTop的设置不起作用
用Vue重构项目时对document.body.scrollTop的设置不起作用goto(index) {this.index=indexlet goto = document.getElementsByClassName('scroll-item');// 获取滚动条需要移动的高度let total =goto[index...
·
用Vue重构项目时对document.body.scrollTop的设置不起作用
goto(index) {
this.index=index
let goto = document.getElementsByClassName('scroll-item');
// 获取滚动条需要移动的高度
let total =goto[index-1].offsetTop;
document.body.scrollTop=parseInt(total)
}
在验证total取值无误后,document.body.scrollTop仍无法设置。
将body改为documentElement即可对其进行设置。
body是DOM对象里的body子节点,即 标签;
documentElement 是整个节点树的根节点root,即 标签;
不同浏览器中,有的能识别document.body.scrollTop,有的能识别document.documentElement.scrollTop,有兼容性问题需要解决。
解决方案:
goto(index) {
this.index=index
let goto = document.getElementsByClassName('scroll-item');
// 获取滚动条需要移动的高度
let total =goto[index-1].offsetTop;
document.body.scrollTop=document.documentElement.scrollTop=parseInt(total)
}
另外:由于兼容性问题,以后获取scrollTop的方法获取滚动条位置也需要注意,两种方法可能有一项为0,滚动条具体位置应设置为两项之和。
更多推荐
已为社区贡献1条内容
所有评论(0)