vue监听页面滚动

2019-06-06  本文已影响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
      }
    },
}
上一篇 下一篇

猜你喜欢

热点阅读