[css] Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink

The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements [blog]. You can disable the default appearance and behaviour by setting -webkit-appearance [docs] to none.

Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:

Example (jsfiddle)

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

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
} 
WebKit (Chrome) Screenshot

screenshot showing webkit's scrollbar, without needing to hover

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to macos

Problems with installation of Google App Engine SDK for php in OS X dyld: Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.62.dylib error running php after installing node with brew on Mac Could not install packages due to an EnvironmentError: [Errno 13] How do I install Java on Mac OSX allowing version switching? Git is not working after macOS Update (xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools) Can't compile C program on a Mac after upgrade to Mojave You don't have write permissions for the /Library/Ruby/Gems/2.3.0 directory. (mac user) How can I install a previous version of Python 3 in macOS using homebrew? Could not install packages due to a "Environment error :[error 13]: permission denied : 'usr/local/bin/f2py'"

Examples related to webkit

com.apple.WebKit.WebContent drops 113 error: Could not find specified service HTML5 Video autoplay on iPhone What does the shrink-to-fit viewport meta attribute do? Chrome / Safari not filling 100% height of flex parent How to style HTML5 range input to have different color before and after slider? What are -moz- and -webkit-? Video auto play is not working in Safari and Chrome desktop browser Rotate and translate Background color not showing in print preview Blurry text after using CSS transform: scale(); in Chrome

Examples related to scrollbar

How to get on scroll events? Transparent scrollbar with css Remove scrollbars from textarea Body set to overflow-y:hidden but page is still scrollable in Chrome How to change scroll bar position with CSS? Prevent scroll-bar from adding-up to the Width of page on Chrome How can I add a vertical scrollbar to my div automatically? Detect Scroll Up & Scroll down in ListView Tkinter scrollbar for frame How do I make the scrollbar on a div only visible when necessary? Imitating a blink tag with CSS3 animations Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink