为何CSS设置overflow:scroll不生效？Mac与Windows Chrome滚动条表现不同

你猜测的MacOS默认隐藏滚动条的结论是正确的，这是系统级的显示策略差异，不是你的代码问题：

• MacOS默认滚动条设置为「滚动时显示」，只有当你在可滚动区域执行滚动操作时，滚动条才会临时出现，无操作时自动隐藏
• Windows系统默认滚动条常驻展示，不需要滚动也会始终显示在可滚动区域边缘

你设置的overflow: scroll属性实际上已经生效了，你可以在测试页的蓝色#box区域执行滚动操作，就能看到滚动条临时出现，滚动功能本身是正常的。

如果需要强制在MacOS的Chrome浏览器下也常驻显示滚动条，可以通过自定义滚动条样式的CSS实现，在你现有代码的style标签中添加以下代码即可：

/* Webkit内核浏览器（Chrome、Safari、新版Edge）滚动条配置 */
#box::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
#box::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}
#box::-webkit-scrollbar-thumb {
  background-color: #a0a0a0;
  border-radius: 6px;
}
/* 适配Firefox浏览器 */
#box {
  scrollbar-width: thick;
  scrollbar-color: #a0a0a0 #f0f0f0;
}

添加后所有平台的同版本Chrome都可以看到常驻的滚动条，显示效果一致。

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