如何让设置overflow-y:scroll的导航菜单滚动时吸附到下一个菜单项？

问题说明 #

设置了overflow-y: scroll的导航菜单，希望拖动滚动条或滚动时，菜单能自动精准吸附到完整的菜单项，避免出现菜单项半显示的情况。

方案一：CSS原生滚动吸附（推荐） #

利用CSS原生的scroll-snap属性实现，无需JavaScript，性能优异且代码简洁。

实现代码 #

/* 导航容器样式 */
.nav-container {
  overflow-y: scroll;
  /* 垂直方向强制吸附 */
  scroll-snap-type: y mandatory;
  /* 可选：隐藏滚动条优化视觉 */
  scrollbar-width: none;
}

/* 兼容webkit内核浏览器隐藏滚动条 */
.nav-container::-webkit-scrollbar {
  display: none;
}

/* 菜单项吸附规则 */
.nav-item {
  /* 菜单项顶部与容器顶部对齐吸附 */
  scroll-snap-align: start;
  width: 100%; /* 确保菜单项占满容器宽度 */
}

原理：scroll-snap-type: y mandatory开启垂直方向的强制吸附，scroll-snap-align: start指定每个菜单项的顶部作为吸附对齐点，滚动时容器会自动定位到最近的对齐点，确保菜单项完整显示。

方案二：JavaScript自定义控制（复杂场景适用） #

如果需要自定义吸附动画、滚动触发条件等精细控制，可以用JS监听滚动事件实现：

实现代码 #

<div class="nav-container" id="navContainer">
  <div class="nav-item">菜单项1</div>
  <div class="nav-item">菜单项2</div>
  <div class="nav-item">菜单项3</div>
  <!-- 更多菜单项 -->
</div>

.nav-container {
  overflow-y: scroll;
  height: 300px; /* 固定容器高度 */
}

.nav-item {
  height: 60px; /* 统一菜单项高度，方便计算 */
}

const navContainer = document.getElementById('navContainer');
const navItems = document.querySelectorAll('.nav-item');
let isScrolling = false;

// 监听滚动事件，滚动停止后执行吸附逻辑
navContainer.addEventListener('scroll', () => {
  if (isScrolling) return;
  isScrolling = true;
  
  setTimeout(() => {
    const itemHeight = navItems[0].offsetHeight;
    const currentScrollTop = navContainer.scrollTop;
    // 计算最近的菜单项索引
    const targetIndex = Math.round(currentScrollTop / itemHeight);
    // 平滑滚动到目标位置
    navContainer.scrollTo({
      top: targetIndex * itemHeight,
      behavior: 'smooth'
    });
    isScrolling = false;
  }, 150); // 延迟150ms等待滚动停止
});

原理：通过监听滚动事件，在滚动停止后计算当前滚动位置对应的最近菜单项，然后调用scrollTo方法滚动到该菜单项的顶部位置，实现精准吸附。

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