如何在Chrome中隐藏内部滚动滚动条？Safari生效方案为何Chrome无效

问题原因 #

你代码里的 ::-chrome-scrollbar 是无效的伪元素选择器——Chrome 和 Safari 同属 WebKit/Blink 内核，统一使用 ::-webkit-scrollbar 来控制滚动条样式，不存在专门的 ::-chrome-scrollbar 选择器，这就是你的代码在Chrome中失效的原因。

修正后的代码 #

基础Chrome/Safari兼容代码 #

只需要保留正确的 ::-webkit-scrollbar 选择器即可：

.inner-scrolling::-webkit-scrollbar {
  display: none;
}

.inner-scrolling {
  overflow: scroll; /* 也可以用 overflow: auto，内容不足时不会显示空的滚动条框架 */
  height: calc(100vh - 64px);
}

全浏览器兼容补充（可选） #

如果需要兼顾Edge、Firefox等其他浏览器，可以添加以下属性：

.inner-scrolling {
  overflow: scroll;
  height: calc(100vh - 64px);
  /* 适配IE/Edge */
  -ms-overflow-style: none;
  /* 适配Firefox */
  scrollbar-width: none;
}

/* 适配Chrome/Safari */
.inner-scrolling::-webkit-scrollbar {
  display: none;
}

注意事项 #

• 用 overflow: auto 替代 overflow: scroll 时，只有内容超出容器高度才会触发滚动，不会显示多余的空滚动条框架，体验更友好。
• 隐藏滚动条后，容器依然支持鼠标滚轮、触摸滑动等滚动操作，不会影响核心滚动功能。

内容的提问来源于stack exchange，提问作者János