[vue] vue2 monitor scroll bar scroll event

the code

Directly upload the code, vue single file
index.vue

<template>
  <div class="content" @scroll="onScroll">
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>
</template>
<script>
  export default {
    
    
    data() {
    
    
      return {
    
    
        num: 1,
      };
    },
    methods: {
    
    
      onScroll(event) {
    
    
        // 在这里处理滚动事件
        console.log("滚动" + `${
      
      (this.num += 1)}`, event);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .content {
    
    
    height: 300px;
    border: 2px solid black;
    overflow: scroll;
  }
</style>

Effect