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!

Presto Behavior (e.g., Opera):

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

Solution: Displaying Scroll Bars Permanently

To force a scroll bar to remain visible in WebKit, manipulate its appearance using the -webkit-scrollbar pseudo-element:

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

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

Result:

Foo<br>
Bar<br>
Baz<br>
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!