vue中 @scroll

概要

@scroll 是 Vue 中的一个修饰符，可以用来监听元素的滚动事件。

使用方法

1：html

<template>
  <div class="container" @scroll="handleScroll">
  </div>
</template>
 

2：js

export default {
  methods: {
    handleScroll(event) {
      console.log(event.target.scrollTop)
      console.log(event.target.scrollHeight)
      console.log(event.target.offsetHeight)
    }
  }
}

结果

注意：

• @scroll 修饰符只能用在绑定到元素上，如果绑定到组件上是无效的。
• 使用 @scroll 修饰符时，事件处理函数中会传入一个 ScrollEvent 对象，其中包含了滚动元素的信息。