Vue重构项目时对document.body.scrollTop的设置不起作用_vue设置document.getelementbyid('dtcscoll').scrolltop-优快云博客

在使用Vue重构项目时，遇到document.body.scrollTop设置无效的问题，文章详细介绍了原因及解决方案，包括如何同时设置document.body.scrollTop和document.documentElement.scrollTop以确保跨浏览器兼容性。

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