How Can I Ensure Scroll Bar Visibility on macOS for Trackpad Users in WebKit/Blink Browsers?

Ensuring Scroll Bar Visibility for MacOS Trackpad Users in WebKit/Blink

In WebKit/Blink browsers like Safari and Chrome, scroll bars on MacOS have undergone a peculiar behavior since OS X Lion (10.7). When using a trackpad, scroll bars automatically conceal themselves until the user's cursor hovers over the scrollable area. While it may seem like a minimalist touch, this behavior can lead to confusion, especially when the scroll bar serves as the sole indicator of a scrollable element.

Solution: Leveraging WebKit's Pseudo-Elements

To rectify this issue and force scroll bars to remain visible, we can manipulate their appearance through WebKit's -webkit-scrollbar pseudo-elements. By disabling the default appearance and behavior with -webkit-appearance: none, we can take control of the scroll bar's styling and ensure its visibility:

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

However, since we're overriding the default style, we also need to define the scroll bar's appearance ourselves. The following CSS recreates the semi-transparent hiding scroll bars:

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

With these modifications, scroll bars on scrollable elements will remain visible on MacOS, regardless of trackpad usage or cursor position, providing increased clarity and ease of navigation for users.

The above is the detailed content of How Can I Ensure Scroll Bar Visibility on macOS for Trackpad Users in WebKit/Blink Browsers?. For more information, please follow other related articles on the PHP Chinese website!