如何強制垂直滾動條始終出現在 CSS 中？

如何在CSS 中始終顯示垂直滾動條

在某些情況下，您可能希望確保垂直滾動條始終可見，即使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);
}

第一行刪除預設的瀏覽器樣式第二行定義捲軸拇指的自訂樣式。

例如：

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
  
  ::-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 中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！