CSS问题：鼠标滚轮/方向键滚动时滚动条不显示

在MacOS系统下，Chrome默认采用系统级滚动条行为，会自动隐藏滚动条，仅在悬停滚动条区域时才显示。要实现鼠标滚轮/方向键滚动时显示滚动条，你需要自定义WebKit滚动条的样式，覆盖默认的隐藏逻辑：

解决方案 #

修改你的CSS代码，添加WebKit滚动条的自定义样式：

.component {
  flex-grow: 1;
  padding: 8px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 自定义滚动条整体宽度 */
.component::-webkit-scrollbar {
  width: 8px;
}

/* 滚动条轨道样式 */
.component::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  border-radius: 4px;
}

/* 滚动条滑块样式 */
.component::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

/* 滑块悬停时的样式优化 */
.component::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

说明 #

• 自定义滚动条样式后，会覆盖Chrome默认的滚动条隐藏行为，让滚动条始终保持可见状态，无论是否滚动或悬停。
• 你可以根据需求调整width、background-color、border-radius等属性，适配组件设计。
• 如果需要兼容Firefox，可额外添加以下代码：

  .component {
    scrollbar-width: thin;
    scrollbar-color: #888 #f0f0f0;
  }
  

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