美文网首页code-sheet
vue 监听滚轮滚动事件

vue 监听滚轮滚动事件

作者: Carol_笑一笑 | 来源:发表于2018-08-23 10:40 被阅读0次

    vue 中滚轮滚动监听事件

    <script>
        export default {
          name:"vue-scroll",
          data () {
            return {
              ……
            }
          },
          mounted: function () {
            window.addEventListener('scroll', this.handleScroll, true);  // 监听(绑定)滚轮滚动事件
          },
          methods: {
            handleScroll: function () {
                let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;  
                // 设备/屏幕高度
                let scrollObj = document.getElementById(div); // 滚动区域
                let scrollTop = scrollObj.scrollTop; // div 到头部的距离
                let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
                //滚动条到底部的条件
                if(scrollTop+clientHeight == scrollHeight){
                    // div 到头部的距离 + 屏幕高度 = 可滚动的总高度
                }  
            }
          },
          destroyed: function () {
            window.removeEventListener('scroll', this.handleScroll);   //  离开页面清除(移除)滚轮滚动事件
          }
        }
    </script>
    

    相关文章

      网友评论

        本文标题:vue 监听滚轮滚动事件

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