鍍金池/ 問答/HTML/ vue怎么監(jiān)聽某個(gè) div的滾輪

vue怎么監(jiān)聽某個(gè) div的滾輪

vue怎么監(jiān)聽某個(gè) div的滾輪事件,哪位大蝦指點(diǎn)一下!

回答
編輯回答
懶洋洋

clipboard.png

clipboard.png

2017年1月11日 06:25
編輯回答
故人嘆

mounted中監(jiān)聽,比如window.addEventListener('scroll', this.handleScroll);
然后beforeDestroy時(shí)候解除監(jiān)聽
window.removeEventListener("scroll", this.handleScroll)

2018年9月14日 18:58
編輯回答
終相守

可以用ref來獲取這個(gè)節(jié)點(diǎn),然后綁定addeventlistener來添加監(jiān)聽器,或者在div通過事件來監(jiān)聽v-on.......

2018年2月27日 10:11
編輯回答
安淺陌

封裝在組件中 如下:

<template>
  <div class="scroll">
    <div class="scroll-div-outer" id='scrollDiv'>
      <div class="scroll-div-inner">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'scroll',
  methods:{
    checkDivScroolTop(){
      //獲取節(jié)點(diǎn)
      var scrollDiv = document.getElementById('scrollDiv');
      //綁定事件
      scrollDiv.addEventListener('scroll', function() {
        console.log(scrollDiv.scrollTop);
      });
    }
  },
  mounted(){
    this.checkDivScroolTop();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .scroll-div-outer{
    height: 200px;
    width: 200px;
    border: 1px solid #ccc;
    overflow: auto;
  }

   .scroll-div-inner{
    height: 600px;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>
2018年4月26日 13:35
編輯回答
陌璃

額,知道了, v-on:scroll

2018年7月15日 22:15