如何防止捲軸在 WebKit/Blink 瀏覽器中的 macOS 觸控板上消失？

防止WebKit/Blink 中觸控板用戶的滾動條消失

macOS 的WebKit/Blink 瀏覽器(Safari/Chrome) 的預設行為長期以來一直是自動向用戶隱藏捲軸在10.7 以上版本(Mac OS X Lion) 上與觸控板互動。這種行為可能特別有問題，因為它刪除了指示元素可滾動性的常見視覺提示。

問題陳述

在確保一致可見的滾動條方面出現了困難對於基於 WebKit 的瀏覽器中的可滾動元素macOS。

解決方案

WebKit 提供了強大的偽元素系統，允許透過使用 -webkit-scrollbar 偽元素對滾動條進行廣泛的操作。若要隨時保持可見的捲軸：

1. 停用預設外觀：利用 -webkit-appearance 屬性並將其設為 none 以覆寫自動隱藏行為。
2. 自訂樣式：手動定義捲軸的特定樣式首選項，因為刪除預設外觀可能會導致看不見的捲軸。考慮指定以下屬性：

• -webkit-scrollbar-track:背景顏色和邊框半徑
• - webkit-scrollbar-拇指：邊框、背景色、邊框radius
• -webkit-scrollbar-width和 -webkit-scrollbar-height: 水平和垂直捲軸的尺寸分別

範例

以下 CSS示範如何重新建立消失的捲軸外觀:

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

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
} 

視覺示範

附加說明

• 附加說明
附加說明

此解決方案特定於基於WebKit的瀏覽器macOS。 提供的 CSS 作為範例，可以進行客製化以配合所需的外觀。

以上是如何防止捲軸在 WebKit/Blink 瀏覽器中的 macOS 觸控板上消失？的詳細內容。更多資訊請關注PHP中文網其他相關文章！