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
完美~
