求助：CSS实现隐藏垂直滚动条且保留滚动功能的方案

嘿，我完全懂你遇到的困扰——想把垂直滚动条藏起来，但还要保留正常滚动和scroll-snap-type的吸附功能，结果加了overflow-y: scroll之后滚动条又冒出来了对吧？其实问题出在overflow-y: scroll会强制浏览器显示滚动条，哪怕你之前加了overflow: hidden也会被覆盖。咱们可以通过针对不同浏览器的CSS规则来搞定这个需求，同时不影响滚动和吸附效果。

完整解决方案代码 #

先给你一套兼容主流浏览器的代码，直接套用就行：

/* 你的滚动容器样式 */
.scroll-container {
  height: 350px; /* 必须设置固定高度/最大高度，否则滚动不生效 */
  overflow-y: scroll; /* 保留垂直滚动功能 */
  scroll-snap-type: y mandatory; /* 保持滚动吸附 */
  
  /* 针对IE/旧版Edge（非Chromium内核） */
  -ms-overflow-style: none;
  /* 针对Firefox */
  scrollbar-width: none;
}

/* 针对Chrome、Edge（Chromium内核）、Safari */
.scroll-container::-webkit-scrollbar {
  width: 0; /* 把滚动条宽度设为0，彻底隐藏 */
  background: transparent; /* 防止留下空白区域 */
}

/* 可选：滚动吸附的子元素样式示例 */
.scroll-item {
  height: 100%;
  scroll-snap-align: start; /* 确保子元素吸附到容器顶部 */
}

为什么之前的方法没生效？ #

你之前先加overflow: hidden再替换成overflow-y: scroll，后者的优先级更高，会强制浏览器显示滚动条——这是scroll值的特性：不管内容是否超出容器，都会显示滚动条。而我们要做的是保留滚动行为，但隐藏滚动条的视觉表现，所以需要结合浏览器专属的滚动条控制属性来实现。

额外提示 #

隐藏滚动条后，用户可能不知道这个区域可以滚动，建议给容器加一些视觉提示（比如底部的渐变阴影），提升可用性：

.scroll-container {
  /* 其他样式不变 */
  position: relative;
}

.scroll-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
  pointer-events: none; /* 不影响滚动操作 */
}

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