Vue中document.body.scrollTop的值總為零的解決辦法
最近在做vue的時候監(jiān)聽頁面滾動發(fā)現(xiàn)document.body.scrollTop一直為0
但是發(fā)現(xiàn)document.body.scrollTop一直是0。
查資料發(fā)現(xiàn)是DTD的問題。
頁面指定了DTD，即指定了DOCTYPE時，使用document.documentElement。
頁面沒有DTD，即沒指定DOCTYPE時，使用document.body。
說一下我的解決問題流程：
1，賦值給scrollTop，發(fā)現(xiàn)一直為0
// 滾動到底部
onScrollBottom () {
this.$nextTick(() => {
const container = this.$el.querySelector('.chat-content')
if (container)
document.documentElement.scrollTop = container.scrollHeight
})
}
打印結(jié)果：
container.scrollHeight: 1127
container.scrollTop:0
2，然后我直接使用body去滾動，發(fā)現(xiàn)依然沒有效果
3，通過F12檢查工具，發(fā)現(xiàn)body高度一直為0
body高度.png
4，根據(jù)高度一直為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>數(shù)字校園系統(tǒng)</title>
<!-- 可隱藏地址欄，僅針對IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 僅針對IOS的Safari頂端狀態(tài)條的樣式（可選default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- IOS中禁用將數(shù)字識別為電話號碼/忽略Android平臺中對郵箱地址的識別 -->
<meta name="format-detection" content="telephone=no, email=no"/>
</head>
<body>
<div id="app"></div>
</body>
</html>
代碼修改為：
document.documentElement.scrollTop = container.scrollHeight
完美~
