每日分享！～ 如何解决获取卷曲高度的问题，document.body.scrollTop为什么在pc端拿不到值

Posted 2021-11-26 yaogengzhu

document.scrollingElement.scrollTop

时间挺快的～ 又是四月的最后一天了！好了进入今天的正题了。你在做项目的时候，经常会不会搞混document.documentElement.scrollTop,和document.body.scrollTop呢？ 在以前我也是经常搞混，为什么我监听了scroll是正确的？

• 比如我在pc 端使用了document.body.scrollTop去获取当前的窗口的高度，始终是0，正在着急为什么是0？？？ 到底哪里错了。找了半天可能都不知道错在哪里了

• 这个时候我们换上了document.documentElement.scrollTop, 就发现了可以拿到想要的值。

  先放一段代码吧！

       // console.log(window.pageXOffset)    
        var log = ''
        window.addEventListener('scroll',function(e){
            // console.log(document.documentElement.scrollTop)
            // ie 
            // console.log(document.body.scrollTop)
            //使用documnet.body.scrollTop. 无法监听到浏览器滚动的高度-
            // console.log(window.pageXOffset)
            log += '\ndocument.documentElement.scrollTop:'+ document.documentElement.scrollTop + '\ndoucument.body.scrollTop是：'+ document.body.scrollTop;
            // result.innerhtml = log
         
            var result = document.querySelector('#result')
            // console.log(result)
            result.innerHTML = log;
            // result.scrollTop = 9999;

到底为什么会这样呢？

• 因为在js中，document.documentElement.ScrollTop 是获取pc端的窗口高度
• 如果使用 document.body.ScrollTop 是获取移动端的窗口高度

如果想又要在pc端可以获取，又想在移动端获取那么可以把这两个代码都写一边就可以了但是呢，这样非常麻烦。

这时候福音来了。 我们可以使用document.scrollingElement.scrollTop来解决这个问题了，推荐以后都要可以使用这个哦！！！ 如果使用了这个获取窗口高度在移动端和pc端都可以拿到了

  document.addEventListener('scroll',function(){
            // console.log('ok')
            console.log(document.scrollingElement.scrollTop)
            // 设置scorllTop 的高度 
        })

好了今天的分享就先到这里了！@～