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

Preventing Scroll Bar Disappearance for Trackpad Users in WebKit/Blink

The default behavior of macOS's WebKit/Blink browsers (Safari/Chrome) has long been to automatically hide scroll bars from users interacting with trackpads on versions above 10.7 (Mac OS X Lion). This behavior can be particularly problematic since it removes a common visual cue indicating the scrollability of an element.

Problem Statement

The difficulty arises in ensuring a consistently visible scroll bar for scrollable elements in WebKit-based browsers on macOS.

Solution

WebKit provides a powerful pseudo-element system, allowing for extensive manipulation of scroll bars through the use of -webkit-scrollbar pseudo-elements. To maintain visible scroll bars at all times:

1. Disable Default Appearance: Utilize the -webkit-appearance property and set it to none to override the automatic hiding behavior.
2. Custom Styling: Define specific styling preferences for the scroll bar manually, as removing the default appearance can lead to invisible scroll bars. Consider specifying the following properties:

• -webkit-scrollbar-track: Background color and border radius
• -webkit-scrollbar-thumb: Border, background color, border radius
• -webkit-scrollbar-width and -webkit-scrollbar-height: Dimensions for horizontal and vertical scroll bars respectively

Example

The following CSS demonstrates how to recreate the disappearing scroll bar appearance:

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

Visual Demonstration

Additional Notes

• This solution is specific to WebKit-based browsers on macOS.
• The CSS provided serves as an example and can be tailored to match the desired appearance.

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