用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,滚动条具体位置应设置为两项之和。

Logo

前往低代码交流专区

更多推荐