如何確保 WebKit/Blink 瀏覽器中的觸控板使用者在 macOS 上捲軸可見？

確保WebKit/Blink 中MacOS 觸控板用戶的滾動條可見性

在Safari 和Chrome 等WebKit/Blink 瀏覽器中，MacOS 上的滾動條自OS X Lion (10.7) 以來，出現了奇怪的行為。使用觸控板時，捲軸會自動隱藏，直到使用者的遊標停留在可捲動區域上。雖然這看起來像是極簡風格，但這種行為可能會導致混亂，尤其是當滾動條充當可滾動元素的唯一指示器時。

解決方案：利用WebKit 的偽元素

為了糾正這個問題並強制滾動條保持可見，我們可以透過WebKit 的-webkit-scrollbar 來操縱它們的外觀偽元素。透過使用-webkit-appearance: none 停用預設外觀和行為，我們可以控制捲軸的樣式並確保其可見性：

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

但是，由於我們要覆蓋預設樣式，我們還需要我們自己定義滾動條的外觀。以下CSS 重新建立半透明隱藏滾動條：

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

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

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .5);
}

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

透過這些修改，可捲動元素上的捲軸將在MacOS 上保持可見，無論觸控板使用情況或遊標位置如何，從而提供更高的清晰度和易用性為使用者導航。

以上是如何確保 WebKit/Blink 瀏覽器中的觸控板使用者在 macOS 上捲軸可見？的詳細內容。更多資訊請關注PHP中文網其他相關文章！