如何在 CSS 中使垂直滚动条永久可见？

通过 CSS Overflow 查询垂直滚动条的永久可见性：Scroll

实现 CSS Overflow-y 时：滚动以将内容限制在分配的范围内高度，确保用户注意到附加内容的存在可能具有挑战性。在 macOS 上，Chrome 和 Safari 隐藏垂直滚动条，直到用户主动滚动或悬停在元素上。这引起了用户是否会立即意识到 div 包含更多内容的担忧。

强制恒定滚动条显示的解决方案

此问题的解决方案包括合并以下 CSS：

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

此 CSS 会覆盖 macOS 浏览器上滚动条的默认样式。通过将 -webkit-appearance 设置为 none，浏览器的默认样式将被禁用。 width 属性指定滚动条所需的宽度，border-radius 属性为滚动滑块添加圆形形状。 background-color 和 box-shadow 属性提供了自定义外观，增强了滚动条的可见性。

通过集成此 CSS，即使鼠标光标未悬停在 div 上，垂直滚动条也将保持可见，确保用户清楚地看到可用的附加内容。该解决方案解决了 macOS 默认行为带来的挑战，并通过提供指示可滚动内容的永久提示来改善用户体验。

以上是如何在 CSS 中使垂直滚动条永久可见？的详细内容。更多信息请关注PHP中文网其他相关文章！