当前位置：首页 > VUE

vue scrolltop 实现

2026-03-07 10:47:02VUE

获取滚动位置

在Vue中获取滚动位置可以通过监听滚动事件或直接访问DOM元素的scrollTop属性。

vue scrolltop 实现

// 监听滚动事件
methods: {
  handleScroll(event) {
    const scrollTop = event.target.scrollTop;
    console.log('当前滚动位置:', scrollTop);
  }
}

// 直接获取DOM元素的scrollTop
const element = document.getElementById('scroll-container');
const scrollTop = element.scrollTop;

设置滚动位置

通过修改DOM元素的scrollTop属性或调用scrollTo方法实现滚动到指定位置。

vue scrolltop 实现

// 直接设置scrollTop
const element = document.getElementById('scroll-container');
element.scrollTop = 100; // 滚动到100px位置

// 使用scrollTo方法（支持平滑滚动）
element.scrollTo({
  top: 100,
  behavior: 'smooth' // 可选: 'auto'（默认）或'smooth'
});

组件内实现滚动

在Vue组件中，推荐通过ref获取DOM元素，避免直接操作DOM。

<template>
  <div ref="scrollContainer" @scroll="handleScroll">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll() {
      const scrollTop = this.$refs.scrollContainer.scrollTop;
      console.log('当前滚动位置:', scrollTop);
    },
    scrollToPosition(top) {
      this.$refs.scrollContainer.scrollTo({
        top,
        behavior: 'smooth'
      });
    }
  }
}
</script>

全局页面滚动

对于整个页面的滚动，可以直接操作window或document.documentElement。

// 获取页面滚动位置
const pageScrollTop = window.pageYOffset || document.documentElement.scrollTop;

// 滚动到页面顶部
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});