如何在 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中文網其他相關文章！