最近vue项目做聊天对话页面 监听页面滚动发现document.body.scrollTop一直为0
查资料发现https://www.cnblogs.com/boyuguoblog/p/7744747.html
不同浏览器中,有的能识别document.body.scrollTop,有的能识别document.documentElement.scrollTop
根据document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。
最后解决代码
scrollPage () {
this.$nextTick(() => {
let chatBox = this.$el.querySelectorAll('.mod-chat-user') //对话一方模块
let length = chatBox.length
if (length > 1) {
let chatContent = chatBox[length - 1]
let scrollHeight = chatContent.offsetTop
if(document.body.scrollTop || document.body.scrollTop == 0 ){ //注意 判断document.body.scrollTop为0是 会为false
document.body.scrollTop = scrollHeight
}else{
document.documentElement.scrollTop = scrollHeight
}
}
})
}