Vue3如何实现指定div内滚动时隐藏对应元素的功能？

• 首先确认滚动容器基础配置，想要触发div的scroll事件，必须给容器设置固定高度+overflow属性，示例模板写法如下：

<!-- 定义滚动容器，绑定ref -->
<div ref="scrollContainer" style="height: 600px; overflow-y: auto;">
  <!-- 需隐藏的目标元素 -->
  <div :class="{ 'is-hidden': isElementHidden }">要自动隐藏的元素</div>
  <!-- 其他长内容 -->
</div>

• 修改事件绑定和滚动位置计算逻辑，你之前的写法有两个常见错误：this.$ref拼写错误，正确是复数形式this.$refs；容器滚动位置属性为scrollTop，而非window的pageYOffset，选项式API完整代码如下：

export default {
  data() {
    return {
      lastScrollPosition: 0,
      isElementHidden: false
    }
  },
  mounted() {
    // 获取滚动容器实例
    const scrollContainer = this.$refs.scrollContainer
    // 初始化滚动位置
    this.lastScrollPosition = scrollContainer.scrollTop
    // 给容器绑定滚动事件，passive参数可提升滚动性能
    scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true })
  },
  beforeUnmount() {
    // 卸载时移除监听，避免内存泄漏
    this.$refs.scrollContainer?.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const currentScrollTop = this.$refs.scrollContainer.scrollTop
      // 向下滚动超过50px隐藏，向上滚动显示，阈值可自行调整
      if (currentScrollTop > this.lastScrollPosition && currentScrollTop > 50) {
        this.isElementHidden = true
      } else {
        this.isElementHidden = false
      }
      // 更新上一次滚动位置
      this.lastScrollPosition = currentScrollTop
    }
  }
}

• 可添加过渡样式让显隐效果更顺滑：

.target-element {
  transition: all 0.3s ease;
}
.is-hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

• 如果使用Vue3组合式API，参考写法如下：

import { ref, onMounted, onBeforeUnmount } from 'vue'

const scrollContainer = ref(null)
const lastScrollPosition = ref(0)
const isElementHidden = ref(false)

const handleScroll = () => {
  const currentScrollTop = scrollContainer.value.scrollTop
  if (currentScrollTop > lastScrollPosition.value && currentScrollTop > 50) {
    isElementHidden.value = true
  } else {
    isElementHidden.value = false
  }
  lastScrollPosition.value = currentScrollTop
}

onMounted(() => {
  scrollContainer.value.addEventListener('scroll', handleScroll, { passive: true })
})

onBeforeUnmount(() => {
  scrollContainer.value?.removeEventListener('scroll', handleScroll)
})

内容的提问来源于stack exchange，提问作者hexoyin10