如何在React项目中强制Chrome浏览器始终显示滚动条？

直接通过CSS即可实现，无需依赖React特定API，完全覆盖浏览器默认的滚动条行为，不用用户修改系统设置：

核心实现代码 #

在项目的全局样式文件（比如src/index.css或src/App.css）中添加以下CSS：

/* 适配Chrome、Safari等WebKit内核浏览器 */
::-webkit-scrollbar {
  width: 12px; /* 设置垂直滚动条宽度 */
  height: 12px; /* 设置水平滚动条高度 */
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 滚动条轨道背景色 */
}

::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条滑块颜色 */
  border-radius: 6px; /* 滑块圆角优化视觉效果 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 鼠标悬停时滑块加深颜色 */
}

/* 适配Firefox浏览器 */
html {
  scrollbar-width: thin; /* 可选值：thin/auto/none，控制滚动条粗细 */
  scrollbar-color: #888 #f1f1f1; /* 格式：[滑块颜色] [轨道颜色] */
}

/* 强制页面始终显示垂直滚动条，避免内容切换时页面布局抖动 */
body {
  overflow-y: scroll;
  overflow-x: auto; /* 水平滚动条按需显示，若要强制显示可改为scroll */
}

说明 #

• WebKit内核浏览器需要通过::-webkit-scrollbar系列伪元素自定义滚动条，设置固定宽度后，即使页面内容不足，滚动条轨道也会保持显示，滑块会自动适配内容高度（无内容时滑块透明但轨道可见）。
• Firefox通过专属的scrollbar-width和scrollbar-color属性控制滚动条样式，配合body的overflow-y: scroll强制垂直滚动条始终存在。
• 该方案完全通过网页样式实现，对所有访问用户生效，无需用户手动修改系统偏好设置。

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