当前位置：首页 > VUE

vue2实现滚动

2026-02-24 10:14:55VUE

监听滚动事件

在Vue2中可以通过v-on指令或@缩写监听窗口或元素的滚动事件。例如监听窗口滚动：

<template>
  <div @scroll="handleScroll">
    <!-- 可滚动内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll(event) {
      console.log('滚动位置:', event.target.scrollTop)
    }
  }
}
</script>

监听窗口滚动

需要监听整个窗口的滚动时，应在mounted生命周期添加事件监听，并在beforeDestroy中移除：

export default {
  mounted() {
    window.addEventListener('scroll', this.handleWindowScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleWindowScroll)
  },
  methods: {
    handleWindowScroll() {
      console.log('窗口滚动位置:', window.scrollY)
    }
  }
}

滚动到指定位置

使用原生DOM方法实现滚动：

// 滚动到顶部
scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑滚动
  })
}

// 滚动到元素
scrollToElement() {
  const el = document.getElementById('target')
  el.scrollIntoView({ behavior: 'smooth' })
}

使用第三方库

对于复杂滚动需求，可以考虑使用专门库：

vue2实现滚动

安装vue-scrollto：
```
npm install vue-scrollto
```
基本使用：
```
import VueScrollTo from 'vue-scrollto'
```

Vue.use(VueScrollTo)

// 在方法中调用 this.$scrollTo('#target', 500, { easing: 'ease-in-out', offset: -50 })


### 节流优化

高频触发的滚动事件应进行节流处理：
```javascript
export default {
  data() {
    return {
      scrollHandler: null
    }
  },
  mounted() {
    this.scrollHandler = _.throttle(this.handleScroll, 200)
    window.addEventListener('scroll', this.scrollHandler)
  },
  methods: {
    handleScroll() {
      // 处理逻辑
    }
  }
}

滚动位置恢复

在keep-alive组件中保存和恢复滚动位置：

export default {
  data() {
    return {
      scrollPosition: 0
    }
  },
  activated() {
    window.scrollTo(0, this.scrollPosition)
  },
  methods: {
    handleScroll() {
      this.scrollPosition = window.scrollY
    }
  }
}

分享给朋友：