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

在WebKit/Blink 中防止macOS 觸控板用戶隱藏滾動條

自版本10.7 起，在macOS 中，WebKit/Blink瀏覽器（例如​​Safari） 、Chrome）在不使用時會自動向觸控板使用者隱藏捲軸。此行為可能會掩蓋確定元素可滾動性的基本視覺提示。

預設 WebKit 行為：

Foo<br>
Bar<br>
Baz<br>
Help I'm trapped in an HTML factory!

急速行為（例如， Opera):

Foo<br>
Bar<br>
Baz<br>
Help I'm trapped in an HTML factory!

解決方案：永久顯示捲軸

解決方案：永久顯示捲軸

若要強制捲軸在WebKit 中保持可見，請使用-webkit-scrollbar操縱其外觀偽元素:

.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;
    background-color: rgba(0, 0, 0, .5);
}

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

CSS:

結果:

Foo<br>
Bar<br>
Baz<br>
Help I'm trapped in an HTML factory!

結果:

透過停用預設捲動捲軸外觀並定義自訂樣式，我們確保捲軸對 macOS 觸控板使用者保持可見。

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