关于vue滚动scrollTop 赋值一直为0问题

Vue中document.body.scrollTop的值总为零的解决办法
最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0
但是发现document.body.scrollTop一直是0。
查资料发现是DTD的问题。
页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。
页面没有DTD,即没指定DOCTYPE时,使用document.body。

说一下我的解决问题流程:
1,赋值给scrollTop,发现一直为0

// 滚动到底部
    onScrollBottom () {
      this.$nextTick(() => {
        const container = this.$el.querySelector('.chat-content')
        if (container)
          document.documentElement.scrollTop = container.scrollHeight
      })
    }

打印结果:

container.scrollHeight: 1127
container.scrollTop:0

2,然后我直接使用body去滚动,发现依然没有效果
3,通过F12检查工具,发现body高度一直为0

body高度.png

4,根据高度一直为0,找到https://blog.csdn.net/qq_24729895/article/details/79049066
5,比对vue项目的index.html,确实是指定了DTD类型

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>数字校园系统</title>
    <!-- 可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果) -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent ) -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
    <meta name="format-detection" content="telephone=no, email=no"/>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

代码修改为:

document.documentElement.scrollTop = container.scrollHeight

完美~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容