美文网首页
vue中实现监听滚动事件的方法

vue中实现监听滚动事件的方法

作者: 程序小小黑 | 来源:发表于2020-10-29 15:54 被阅读0次

JS部分

    mounted() {
      window.addEventListener('scroll', this.scrollEvent,false)
    },
    methods: {
      scrollEvent() {
        // scrollHeight(文档内容实际高度,包括超出视窗的溢出部分)、
        // scrollTop(滚动条滚动距离)、
        // clientHeight(窗口可视范围高度)。
        const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // 设备屏幕高度
        const scrollTop = window.pageYOffset; // div 到头部的距离
        const scrollHeight = document.body.scrollHeight; // 滚动条的总高度
        //滚动条到底部的条件
        if (scrollTop + clientHeight == scrollHeight) {
          // div 到头部的距离 + 屏幕高度 = 可滚动的总高度
        }
      }
   }

相关文章

网友评论

      本文标题:vue中实现监听滚动事件的方法

      本文链接:https://www.haomeiwen.com/subject/wyakvktx.html