当前位置：首页 > VUE

vue实现滚动中断

2026-03-26 20:04:10VUE

Vue 实现滚动中断的方法

在 Vue 中实现滚动中断通常需要监听滚动事件，并在特定条件下阻止默认行为或停止滚动。以下是几种常见的方法：

使用 `@scroll` 事件和 `preventDefault`

在 Vue 模板中绑定 @scroll 事件，并通过 event.preventDefault() 阻止默认滚动行为。适用于需要动态控制滚动的情况。

vue实现滚动中断

<template>
  <div @scroll="handleScroll" style="height: 200px; overflow-y: auto;">
    <!-- 滚动内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll(event) {
      if (/* 中断条件 */) {
        event.preventDefault();
      }
    }
  }
}
</script>

通过 CSS 控制滚动

通过动态绑定 CSS 的 overflow 属性，直接禁用滚动。适合需要完全禁止滚动的场景。

vue实现滚动中断

<template>
  <div :style="{ overflow: allowScroll ? 'auto' : 'hidden' }">
    <!-- 滚动内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      allowScroll: false
    }
  }
}
</script>

使用 `scrollTo` 方法重置位置

通过 scrollTo 方法强制将滚动位置重置到原点或其他固定位置，实现中断效果。

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

<script>
export default {
  methods: {
    handleScroll() {
      if (/* 中断条件 */) {
        this.$refs.scrollContainer.scrollTo(0, 0);
      }
    }
  }
}
</script>

监听滚动方向并中断

结合 scroll 事件和状态管理，判断滚动方向后中断。

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

<script>
export default {
  data() {
    return {
      lastScrollPosition: 0
    }
  },
  methods: {
    handleScroll(event) {
      const currentPosition = event.target.scrollTop;
      if (currentPosition > this.lastScrollPosition) {
        // 向下滚动时中断
        event.target.scrollTop = this.lastScrollPosition;
      }
      this.lastScrollPosition = currentPosition;
    }
  }
}
</script>