使用CSS scroll snap实现滚动吸附时出现多余滚动条如何解决

你遇到的多余滚动条问题，本质是自定义滚动容器和页面根元素的滚动行为冲突导致的，按下面步骤调整即可解决：

1. 先重置页面根元素默认样式
   给html和body标签添加如下规则，禁用根元素自带的滚动能力，避免双滚动条：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
}

2. 调整你现有滚动容器的样式
   将你原有代码里的overflow-y: scroll改为overflow-y: auto，同时把max-height换成固定height，避免高度计算偏差：

/* 替换你原来的容器样式 */
.scroll-container {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
  width: 100%;
}

3. 如需完全隐藏滚动条同时保留滚动功能，追加以下兼容规则：

/* 适配webkit内核浏览器（Chrome、Safari、Edge） */
.scroll-container::-webkit-scrollbar {
  display: none;
}
/* 适配Firefox */
.scroll-container {
  scrollbar-width: none;
}
/* 适配旧版IE */
.scroll-container {
  -ms-overflow-style: none;
}

注意要确保你的滚动容器的所有父级元素没有额外的边距、内边距设置，不然会导致容器实际高度超出视口，额外产生滚动空间。

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