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
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
Div scrollbars in mac webkit browsers
I wasn't able to sort out why... but I went @HenrikAmmer's answer. That's good enough for my solution.
Related Topics
Remove Padding from Columns in Bootstrap 3
2 Column Div Layout: Right Column With Fixed Width, Left Fluid
How to Word-Wrap Long Words in a Div
Format Text in a ≪Textarea≫
Size of Html5 Canvas Via CSS Versus Element Attributes
How to Add a Scrollbar to an Html5 Table
Font Awesome Not Working, Icons Showing as Squares
How to Style the Html5 Form Validation Error Messages With Css
Is There a "Previous Sibling" Selector
Align Inline-Block Divs to Top of Container Element
Transitions on the CSS Display Property
Font Awesome 5, Why Is CSS Content Not Showing
Css Property Border-Color Not Working
Why Does Order of Transforms Matter? Rotate/Scale Doesn't Give the Same Result as Scale/Rotate