How Can I Prevent Scroll Bars from Hiding on macOS Trackpads in WebKit/Blink Browsers?-CSS Tutorial-php.cn

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

Mary-Kate Olsen

Release： 2025-01-04 08:45:33

Original

519 people have browsed it

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;
}

Copy after login

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!