Hey，这个困扰我也碰到过——那些始终杵在那儿的滚动条不仅和网站配色格格不入，还平白占了宝贵的页面空间，完全破坏了设计感！别慌，咱们分两种场景来解决：要么从浏览器层面覆盖系统的全局设置，要么作为开发者直接给网站定制滚动条样式，总有一款适合你。

一、浏览器端：覆盖系统滚动条设置（适合个人浏览体验） #

不管是Ubuntu系统，还是外接鼠标的OSX，都能通过浏览器设置强制改成「仅滚动时显示」的友好模式：

1. Chrome/Edge 浏览器 #

• 直接在地址栏输入 chrome://settings/appearance（Edge是 edge://settings/appearance）
• 找到**「滚动条行为」选项，选择「仅在滚动时显示」**（不同版本措辞可能略有差异，找类似描述即可）

2. Firefox 浏览器 #

• 地址栏输入 about:config，确认风险提示后进入配置页面
• 搜索 widget.non-native-theme.scrollbar.style
• 将值改为 3（对应「仅滚动时显示」：0=系统默认，1=始终显示，2=悬停时显示，3=仅滚动时显示）

额外：OSX系统全局设置 #

如果是外接鼠标的OSX用户，也可以直接改系统全局设置，不用每个浏览器单独调整：
打开「系统设置」→「通用」→「滚动条」，选择「仅在滚动时显示」即可。

二、开发者层面：自定义网站滚动条样式（适配所有访客） #

如果是你自己开发的网站，完全可以用CSS定制滚动条，让它和网站配色统一，甚至控制显示逻辑，彻底摆脱系统设置的限制：

1. 基础定制：统一滚动条外观 #

/* 适配Chrome、Edge、Safari等Webkit内核浏览器 */
::-webkit-scrollbar {
  width: 8px; /* 缩窄滚动条宽度，节省空间 */
}

::-webkit-scrollbar-track {
  background: #f5f5f5; /* 轨道颜色匹配网站背景 */
}

::-webkit-scrollbar-thumb {
  background: #666; /* 滑块颜色用网站主色调替换 */
  border-radius: 4px; /* 圆角让滚动条更柔和 */
}

::-webkit-scrollbar-thumb:hover {
  background: #333; /* 鼠标悬停时的加深效果 */
}

/* 适配Firefox浏览器 */
* {
  scrollbar-width: thin; /* 设置细滚动条 */
  scrollbar-color: #666 #f5f5f5; /* 滑块颜色 + 轨道颜色 */
}

2. 模拟OSX自动隐藏效果 #

通过CSS过渡和:hover伪类，让滚动条默认隐藏，仅在滚动或悬停时显示：

/* Webkit内核浏览器 */
::-webkit-scrollbar {
  width: 0; /* 默认隐藏滚动条 */
  transition: width 0.2s ease;
}

/* 鼠标悬停在页面或滚动时显示 */
:hover::-webkit-scrollbar,
:active::-webkit-scrollbar {
  width: 8px;
}

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