undefinedfix
Sign in

How does Vue monitor the wheel of a div

hmhsv edited in Mon, 16 Aug 2021

Vue how to monitor the wheel event of a div, which prawn to point out!

5 Replies
Rob
commented on Mon, 16 Aug 2021

Packaged in components as follows:

<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(){
      //获取节点
      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>
tuckerwired
commented on Mon, 16 Aug 2021

Well, I see. V-on: scroll

qmuyq
commented on Tue, 17 Aug 2021

You can use ref to get this node, and then bind add event listener to add listeners, or listen to v-on through events in Div

dnqlo
commented on Tue, 17 Aug 2021

Monitor in mounted, such as window.addEventListener ('scroll', this.handleScroll ); and then before destroy window.removeEventListener ("scroll", this.handleScroll )

openHBP
commented on Tue, 17 Aug 2021

clipboard.png

clipboard.png

lock This question has been locked and the reply function has been disabled.