How Can I Make Scrollbars Always Visible for Trackpad Users in WebKit/Blink?

Overcoming Hidden Scrollbars for Trackpad Users in WebKit/Blink

UIKit/Blink's default behavior conceals scrollbars for trackpad users on MacOS, potentially hindering user interaction. To resolve this issue and ensure consistent scrollbar visibility, follow these steps:

1. Disable Default Scrollbar Behavior:

Disable WebKit's default scrollbar appearance using the -webkit-appearance: none; CSS property on the ::-webkit-scrollbar pseudo-element.

2. Define Custom Scrollbar Styling:

Since the default styling is removed, you must define your own. The following CSS recreates the appearance of hidden scrollbars:

.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; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

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

3. Apply Styling to Scrollable Elements:

Apply the custom CSS to scrollable elements, ensuring that scrollbars are always visible, regardless of trackpad usage. This provides a consistent user experience and eliminates potential confusion.

The above is the detailed content of How Can I Make Scrollbars Always Visible for Trackpad Users in WebKit/Blink?. For more information, please follow other related articles on the PHP Chinese website!