美文网首页
vue监听页面滚动

vue监听页面滚动

作者: 小虾米前端 | 来源:发表于2019-06-06 10:43 被阅读0次

    需求:页面滚动到某一位置触发某个效果。

           <div :class="activeBtn ? 'class-1': 'class-2'" @click="actBtn">
                点击跳转
          </div>
    data () {
        activeBtn : false
      }
      mounted: function () {
        window.addEventListener('scroll', this.handleScroll, true);  // 监听(绑定)滚轮滚动事件
      },
    
    methods: {
          // 监听滚轮
        handleScroll: function () {
        // 取最外层的类名
          let conEl = document.getElementsByClassName('content')[0]
          if (conEl.scrollTop >= 600) {
            this.activeBtn = true
          }
          if (conEl.scrollTop < 600) {
            this.activeBtn = false
          }
        },
    }
    

    相关文章

      网友评论

          本文标题:vue监听页面滚动

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