CSS实现滚动吸附效果时如何消除出现的双垂直滚动条？

你遇到的双滚动条是两个常见问题叠加导致的：

• 浏览器默认给body元素设置了8px左右的外边距，你的.container设了height: 100vh，加上body的默认margin后，总高度超过了视口高度，触发了body本身的滚动条，这就是第二个滚动条的来源
• 你写的overflow-y: scroll hidden是非法属性值，overflow-y作为单轴控制属性，一次只能接收一个属性值，浏览器识别到非法值会自动回退到默认配置，所以滚动吸附直接失效。如果要同时控制两个轴向的滚动，应该用简写属性overflow: 水平轴属性 垂直轴属性。

首先添加全局样式重置默认边距，同时禁用body的滚动能力，把所有滚动行为交给container处理，修改后的完整CSS代码如下：

/* 新增全局重置代码 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* 禁用body的滚动，避免出现双滚动条 */
  overflow: hidden;
}

section {
  background: #1d1c1c;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  /* 可选：补充文字颜色，避免深色背景下文字看不见 */
  color: #fff;
}

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

如果你不想完全禁用body的滚动，也可以把.container的高度从100vh改成100%，同时保留html和body的height: 100%设置，也能解决高度溢出的问题，不会影响滚动吸附效果。

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