How Can I Prevent Scroll Bars from Hiding on macOS Trackpads in WebKit/Blink Browsers?

Preventing Scroll Bar Concealment for macOS Trackpad Users in WebKit/Blink

In macOS since version 10.7, WebKit/Blink browsers (e.g., Safari, Chrome) automatically hide scroll bars from trackpad users when not in use. This behavior can obscure essential visual cues for determining an element's scrollability.

Default WebKit Behavior:

Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!</p>
<p></div></p>
<p><strong>Presto Behavior (e.g., Opera):</strong></p>
<p><div><pre class="brush:php;toolbar:false">Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!</p>
<p></div></p>
<p><strong>Solution: Displaying Scroll Bars Permanently</strong></p>
<p>To force a scroll bar to remain visible in WebKit, manipulate its appearance using the -webkit-scrollbar pseudo-element:</p>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.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;
}

Result:

Foo

Bar

Baz

Help I'm trapped in an HTML factory!

By disabling the default scroll bar appearance and defining a custom style, we ensure that the scroll bar remains visible for macOS trackpad users.

The above is the detailed content of How Can I Prevent Scroll Bars from Hiding on macOS Trackpads in WebKit/Blink Browsers?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn