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

by

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

More Related Contents:

  1. Custom CSS Scrollbar for Firefox
  2. Safari/Chrome (Webkit) – Cannot hide iframe vertical scrollbar
  3. Chrome / Safari not filling 100% height of flex parent
  4. Hiding the scroll bar on an HTML page
  5. How to remove the border highlight on an input text element
  6. How to style HTML5 range input to have different color before and after slider?
  7. CSS scrollbar style cross browser [duplicate]
  8. What is WebKit and how is it related to CSS?
  9. Disable webkit’s spin buttons on input type=”number”?
  10. CSS – Overflow: Scroll; – Always show vertical scroll bar?
  11. CSS transition shorthand with multiple properties?
  12. WebKit: Blurry text with css scale + translate3d
  13. CSS endless rotation animation
  14. How to prevent Webkit text rendering change during CSS transition
  15. Webkit CSS to control the box around the color in an input[type=color]?
  16. Hidden scrollbars in Firefox (allows scrolling but just no scrollbar)
  17. Webkit backface visibility not working
  18. How to force re-render after a WebKit 3D transform in Safari
  19. What is the correct “-moz-appearance” value to hide dropdown arrow of a element
  20. Why does stacking order change on webkit filter hover?
  21. How to detect if the OS is in dark mode in browsers?
  22. CSS3 property webkit-overflow-scrolling:touch ERROR
  23. CSS “outline” different behavior behavior on Webkit & Gecko
  24. Wonky text anti-aliasing when rotating with webkit-transform in Chrome
  25. WebKit CSS content Unicode bug?
  26. Apply webkit scrollbar style to specified element
  27. How do I remove all default Webkit search field styling?
  28. Tint image using CSS without overlay
  29. webkit transform blocking link
  30. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

Leave a Comment