Vue实现监听滚动选中

监听滚动并高亮选中元素的实现方法

在Vue中实现监听滚动并高亮当前选中元素，可以通过结合IntersectionObserverAPI和Vue的响应式特性来完成。以下是具体实现方案：

安装必要依赖

npm install lodash.throttle

组件实现代码

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index" 
      :ref="`section-${index}`"
      class="content-section"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
import throttle from 'lodash.throttle';

export default {
  data() {
    return {
      items: ['Section 1', 'Section 2', 'Section 3', 'Section 4'],
      currentActive: 0,
      observer: null
    };
  },
  mounted() {
    this.initIntersectionObserver();
    window.addEventListener('scroll', throttle(this.handleScroll, 100));
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    initIntersectionObserver() {
      const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.5
      };

      this.observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const index = this.items.findIndex(
              (_, i) => this.$refs[`section-${i}`][0] === entry.target
            );
            if (index !== -1) {
              this.currentActive = index;
            }
          }
        });
      }, options);

      this.items.forEach((_, index) => {
        this.observer.observe(this.$refs[`section-${index}`][0]);
      });
    },
    handleScroll() {
      // 备用滚动处理逻辑
      const scrollPosition = window.scrollY;
      this.items.forEach((_, index) => {
        const el = this.$refs[`section-${index}`][0];
        const { top, height } = el.getBoundingClientRect();
        const offsetTop = top + scrollPosition;

        if (
          scrollPosition >= offsetTop - 100 && 
          scrollPosition < offsetTop + height - 100
        ) {
          this.currentActive = index;
        }
      });
    }
  }
};
</script>

<style>
.content-section {
  height: 500px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
}

.active {
  background-color: #f0f0f0;
  border-left: 3px solid #42b983;
}
</style>

实现原理说明

IntersectionObserver API 使用现代浏览器提供的IntersectionObserverAPI可以高效检测元素是否进入视口。当元素进入或离开视口时，会触发回调函数，通过比较元素的交叉比例(threshold)来确定当前活跃元素。

备用滚动处理 添加了传统的滚动事件监听作为备用方案，通过计算元素位置与滚动位置的相对关系确定当前活跃项。使用lodash.throttle进行节流优化，避免频繁触发导致的性能问题。

响应式更新 Vue的响应式系统会自动处理currentActive的变化，可以在模板中根据该值动态添加active类或其他样式处理。

进阶优化建议

性能优化 对于大量元素的情况，可以考虑虚拟滚动技术，只渲染视口附近的元素，大幅提升性能。

平滑滚动 添加点击导航平滑滚动到对应位置的功能：

scrollToSection(index) {
  const el = this.$refs[`section-${index}`][0];
  el.scrollIntoView({ behavior: 'smooth' });
}

自定义阈值 根据实际需求调整threshold值，控制元素被视为"进入视口"的敏感度。值越小需要更少的可见部分就会触发。

以上实现方案结合了现代浏览器API和传统方法，确保了兼容性和性能的平衡，适用于大多数需要滚动高亮的场景。