vue中 @scroll

牧杉-惊蛰

已于 2023-07-20 15:25:01 修改

阅读量1.5k

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-20 15:18:48 首次发布

本文链接：https://blog.csdn.net/m0_63026408/article/details/131831181

版权

在Vue中，@scroll修饰符用于监听元素的滚动事件。通过在div等元素上使用@scroll绑定handleScroll方法，可以在事件处理函数中获取到ScrollEvent对象，从而访问如scrollTop、scrollHeight和offsetHeight等属性，来获取滚动信息。注意@scroll不能用在组件上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概要

@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)
    }
  }
}