如何讓捲軸在手機瀏覽器上永久可見？

在行動瀏覽器上啟用持久滾動條可見性

在呈現可捲動內容的網站時，開發人員經常會遇到行動裝置上隱藏滾動條的問題。雖然滾動條在桌面瀏覽器上很容易看到，但它們在行動瀏覽器上往往是隱藏的，直到啟動滾動為止。這可能會導致可用性方面的挑戰。

解決此問題的一種方法是利用 CSS 自訂樣式。透過套用特定的 CSS 規則，可以使捲軸在行動瀏覽器上始終可見。

考慮以下CSS 程式碼：

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

透過將此CSS 程式碼新增至樣式表中，您可以:

• 停用預設瀏覽器捲動樣式（-webkit-appearance：無;)
• 定義垂直和水平滾動條的自訂尺寸（寬度和高度）
• 自訂捲軸拇指的外觀（背景顏色、邊框半徑和邊框）
• 指定滾動條軌道的樣式（border-radius 和background-color)

應用此CSS 程式碼將使捲軸在行動裝置上持續可見，從而提供更直覺的使用者體驗。

以上是如何讓捲軸在手機瀏覽器上永久可見？的詳細內容。更多資訊請關注PHP中文網其他相關文章！