移动端浏览器隐藏滚动条（不禁用滚动）的实现问题

针对你遇到的PC端生效但移动端Safari/Chrome失效的问题，可以试试以下几种兼容方案：

方案1：容器嵌套法（最可靠） #

通过两层容器嵌套，外层隐藏溢出的滚动条，内层承载可滚动内容，既能保留滚动功能，又完全隐藏滚动条。

/* 外层容器：限制宽度，隐藏溢出部分 */
.scroll-container {
  width: 100%;
  overflow: hidden;
}

/* 内层容器：宽度略大于外层，确保滚动条被外层隐藏；纵向滚动则调整高度属性 */
.scroll-content {
  width: calc(100% + 20px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 开启移动端顺滑滚动效果 */
}

如果是横向滚动需求，将width改为height，overflow-y替换为overflow-x即可。

方案2：多浏览器兼容CSS写法 #

Safari移动端对::-webkit-scrollbar的支持有限，需补充额外属性确保兼容：

/* 基础滚动条隐藏规则 */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* 针对不同浏览器的兼容设置 */
.scroll-element {
  overflow: scroll; /* 必须设为scroll而非auto，避免Safari失效 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox标准写法 */
  -ms-overflow-style: none; /* IE/Edge兼容 */
}

方案3：padding+clip-path裁剪法 #

通过给容器添加右侧padding预留滚动条空间，再用clip-path裁剪掉滚动条区域：

.scroll-element {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 20px; /* 数值与滚动条宽度一致 */
  clip-path: inset(0 0 0 0); /* 裁剪掉右侧滚动条区域 */
}

::-webkit-scrollbar {
  width: 20px; /* 与padding-right数值匹配 */
}

你可以根据自身布局结构选择合适的方案，以上方法均能在不禁用滚动的前提下，兼容移动端Safari和Chrome浏览器。

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