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

Question

WebKit Blink s  Safari Chrome  default behaviour on MacOS since 10 7  Mac OS X Lion  is to hide scroll bars from trackpad users when they re not in use  This can be confusing  the scroll bar is often the only visual cue that an element is scrollable   Example  jsfiddle   HTML   lt div class  frame  gt      Foo lt br   gt      Bar lt br   gt      Baz lt br   gt      Help I m trapped in an HTML factory    lt  div gt    CSS   frame       overflow-y  auto      border  1px solid black      height  3em      width  10em      line-height  1em       WebKit  Chrome  Screenshot    Presto  Opera  Screenshot       How can I force a scroll bar to always be displayed on a scrollable element in WebKit

User · Answer

Here is a shorter bit of code that reenables scroll bars across your entire website. I'm not sure if it's much different than the current most popular answer but here it is:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Found at this link: http://simurai.com/blog/2011/07/26/webkit-scrollbar

User · Answer

Browser scrollbars don t work at all on iPhone iPad  At work we are using custom JavaScript scrollbars like jScrollPane to provide a consistent cross-browser UI  http   jscrollpane kelvinluck com   It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site

User · Answer

Another good way of dealing with Lion s hidden scroll bars is to display a prompt to scroll down  It doesn t work with small scroll areas such as text fields but well with large scroll areas and keeps the overall style of the site  One site doing this is http   versusio com  just check this example page and wait 1 5 seconds to see the prompt   http   versusio com en samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb  The implementation isn t hard but you have to take care  that you don t display the prompt when the user has already scrolled    You need jQuery   Underscore and    window  scroll to check if the user already scrolled by himself      delay   to trigger a delay before you display the prompt -- the prompt shouldn t be to obtrusive      prompt div   fadeIn  slow   to fade in your prompt and of course      prompt div   fadeOut  slow   to fade out when the user scrolled after he saw the prompt  In addition  you can bind Google Analytics events to track user s scrolling behavior

User · Answer

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

User · Answer

For a one-page web application where I add scrollable sections dynamically  I trigger OSX s scrollbars by programmatically scrolling one pixel down and back up      Plain JS  var el   document getElementById  scrollable-section    el scrollTop   1  el scrollTop   0      jQuery      scrollable-section   scrollTop 1  scrollTop 0     This triggers the visual cue fading in and out

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

Examples related to css

Examples related to macos

Examples related to webkit

Examples related to scrollbar

Examples related to blink