问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

document.documentElement.scrollTop和document.body.scrollTop同时为0？

头像
yzbao
    63165895

    什么情况下会使document.documentElement.scrollTop和document.body.scrollTop同时为0？

    别和我说什么DTD的问题，我想问的是他俩同时为0了,之前使用

    document.body.scrollTop || document.documentElement.scrollTop

    是可以获取到屏幕滚动高度的，但是项目多人参与，不知道改了哪里，现在这两个会去到的值都变成0了。

    javascriptcss
    阅读 4.5k
    3 个回答
    得票最新
    头像
    yzbao
      63165895
      ✓ 已被采纳

      受上回答启发确实跟css有关，
      但是：

      html {
    height: 100%;
    overflow: scroll;
}
这样写是获取不到值的
      html {
    height: 100%;
    overflow: visible;
}
这样写就可以获取到值了，所以跟html的高度是否是100%并无关系
      头像
      joy钰
        9.1k53031

        和你的页面布局有关。
        正常情况下滚动条是属于 html 的，页面撑开可以正常获取document.documentElement.scrollTop。
        在滚动条属于 html 或 body 的情况下document.body.scrollTop || document.documentElement.scrollTop能正常拿到相应值。

        如果都为0，那说明：

        1. 当前滚动条位置就是在顶部。
        2. 没有产生滚动。
        3. 你当前的滚动条不再属于 html 或者 body。
        4. 其它我没想到的= =。

        比如以下这种结构对应3：

        <!DOCTYPE html>
<html>
    <body>
        <div class="wrapper">
            <div class="main"></div>
        </div>
    </body>
</html>

<style>
html, body, .wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.main {
    height: 10000px;
}
</style>

        这样.main撑开的滚动条其实是属于.wrapper的。只有wrapper.scrollTop可以获取相应的值。
        document.body.scrollTop || document.documentElement.scrollTop自然始终为0。

        头像
        爱萌萌
          1.4k1518

          这也太巧了吧，我今天也是这样的情况，本来上拉加载好好的，不知道为什么突然就挂了，定位发现是

          document.body.scrollTop

          始终为0
          我一开始也以为是css造成了，但是我也没改啊0.0，最后放弃了，将这个获取方法更兼容的写了下就好了。

          let scrollTop = window.pageYOffset
    || document.documentElement.scrollTop
    || document.body.scrollTop
    || 0;
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题