Vue 页面滚动监听与锚点导航实现指南

在开发需要滚动交互的页面时（如长列表、阅读页、多模块页面），滚动监听和锚点导航是非常实用的功能。今天就来分享如何在 Vue 中优雅实现这两个功能，附完整代码和关键注意事项。

一、页面滚动监听滚动事件

实现滚动监听的核心是：给可滚动容器绑定 scroll 事件，通过事件对象获取滚动位置，进而执行业务逻辑（如导航栏样式变化、加载更多等）。

1. 基础配置（必须！）

首先需要给滚动容器设置固定高度和垂直滚动属性，否则滚动事件无法触发：

<div class="main" ref="mainRef">  
    <!-- 这里放长内容（超出容器高度才会滚动） -->
</div>

/* 样式：关键配置 */
.main {  
    /* 必须设置高度（固定值或百分比） */  
    height: 100vh; /* 占满视口高度 */  
    /* 允许垂直滚动，内容超出时显示滚动条 */  
    overflow-y: auto;  
    /* 可选：美化滚动条 */  
    scrollbar-width: thin;
}

2. 绑定滚动事件

在 Vue 中通过 ref 获取容器 DOM，然后绑定 scroll 事件，实现滚动监听：

// 滚动事件处理函数
const handleScroll = (e) => {
  // 获取当前滚动位置（距离顶部的像素值）
  const scrollTop = e.target.scrollTop;

  // 业务逻辑示例：
  // 1. 滚动超过100px时改变导航栏样式
  if (scrollTop > 100) {
    console.log('滚动超过100px，导航栏显示背景');
  } else {
    console.log('滚动在顶部，导航栏透明');
  }

  // 2. 滚动到底部加载更多
  const { scrollHeight, clientHeight } = e.target;
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    console.log('快滚动到底部了，加载更多内容');
  }
};

// 组件挂载后绑定事件
onMounted(() => {
  mainRef.value?.addEventListener('scroll', handleScroll);
});
// 组件卸载前移除事件（避免内存泄漏）
onUnmounted(() => {  
  mainRef.value?.removeEventListener('scroll', handleScroll);
});

二、 实现平滑锚点导航

锚点导航用于快速跳转到页面指定位置（如目录跳转），结合 scrollIntoView 可实现平滑滚动效果，无需手动计算位置。

1. 基础锚点跳转

给目标元素添加 id，通过 scrollIntoView 直接跳转到该元素：

<!-- 模板：导航按钮 + 目标内容 -->
<button @click="scrollToSection('section-1')">跳转到第一部分</button>
<div class="main" ref="mainRef">  
  <div id="section-1" class="section">第一部分内容</div> 
  <div id="section-2" class="section">第二部分内容</div>
  <!-- 更多内容... -->
</div>

// 脚本：锚点跳转方法
const scrollToSection = (id) => {
  // 获取目标元素
  const target = document.getElementById(id);
  if (target) {
    // 平滑滚动到目标元素
    target.scrollIntoView({
      behavior: 'smooth', // 平滑滚动（默认是瞬间跳转）
      block: 'start' // 对齐方式：顶部对齐（可选：center/end）   
    });  
  }
};

2. 在自定义滚动容器内锚点跳转

如果滚动容器不是 window 而是自定义容器（如上文的 .main），需要稍作调整：

// 脚本：在自定义容器内实现锚点跳转
const scrollToSectionInContainer = (id) => {
  const container = mainRef.value;
  const target = document.getElementById(id);

  if (container && target) {
    // 计算目标元素相对于容器的位置
    const targetTop = target.offsetTop;

    // 平滑滚动到指定位置   
    container.scrollTo({    
      top: targetTop,    
      behavior: 'smooth'    
    }); 
  }
};

三、 关键注意事项

1. 滚动事件必须卸载
   组件销毁时一定要移除 scroll 事件监听，否则会导致内存泄漏（尤其是在单页应用中）。

2. 容器高度设置
   .main 容器的 height 必须明确（如 100vh、500px 或父元素有固定高度时用 100%），否则 overflow-y: auto 不会生效，滚动事件也无法触发。

3. 平滑滚动兼容性
   behavior: 'smooth' 在主流浏览器（Chrome、Firefox、Edge）中支持良好，但 IE 不支持，如需兼容可引入第三方库（如 smooth-scroll）。

4. 避免频繁触发滚动事件
   滚动事件会频繁触发（每秒可达数十次），如果在 handleScroll 中处理复杂逻辑（如 DOM 操作），建议使用防抖（debounce）优化：

// 防抖处理示例（使用lodash或自定义）
import { debounce } from 'lodash';
const handleScroll = debounce((e) => {
  // 复杂逻辑...
}, 100); // 100ms内只执行一次

通过以上方法，可在 Vue 中轻松实现滚动监听和锚点导航功能，适用于长页面交互、目录跳转、滚动加载等场景。关键是记住：给容器设置正确的高度和滚动属性，及时销毁事件监听，就能避免大部分坑～