vue监听页面滚动document.body.scrollTop为0

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

推荐阅读更多精彩内容