Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink
Solution 1
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
Solution 2
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.
Solution 3
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
Solution 4
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.
Solution 5
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.
Related videos on Youtube
Jeremy
████ ████ ███████ ██ ███ ██████ █ ████ █ ███ ██ ████ ██ ██ ███ █ ████ ████ ███████ █ ███ █████ ██ █ ███ ████ ████ ███████ ███████ ███ ██ ██████ [mailto:[email protected]](https://mailto.jeremy.ca)
Updated on June 07, 2020Comments
-
Jeremy almost 4 years
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
CSS<div class="frame"> Foo<br /> Bar<br /> Baz<br /> Help I'm trapped in an HTML factory! </div>
WebKit (Chrome) Screenshot Presto (Opera) Screenshot.frame { overflow-y: auto; border: 1px solid black; height: 3em; width: 10em; line-height: 1em; }
How can I force a scroll bar to always be displayed on a scrollable element in WebKit?
-
xaddict about 9 yearsHave you tried overflow:scroll? This used to work in Chrome. It should force the scrollbars to always display.
-
Blaise over 8 yearsNote that it's also a problem in Firefox on Mac OS X.
-
Armen Michaeli about 7 yearsMan, I hate it when websites mess with the UI on my system and user agent.
-
-
jedierikb almost 12 yearsFor forced macosx lion scrollbars, the trick described here does not work with this technique: stackoverflow.com/a/3417992/62255. No bother though -- since we are explicitly setting the dimensions here, we can access them directly.
-
XML over 11 yearsNote that you can also customize the scrollbar's track/background with:
.frame::-webkit-scrollbar-track { background-color: #FFF; border-radius: 8px; }
-
RobW about 10 yearsNote webkit scrollbar styles don't work in iOS 7 (and possibly 6).
-
icfantv almost 10 yearsjust a note if you're doing this on tables (with or without fixed headers), put the "frame" class on the tbody element and it will work. it's working for me w/ bootstrap. if i could upvote this 1000 times i would have.
-
manafire over 9 yearsThis worked except when dragging the scrollbar itself - caused the div content to flash and disappear. There's a setting in Mac to control scrollbars to appear always but most casual users probably don't know that: kb.tableausoftware.com/articles/knowledgebase/…
-
jmq over 8 yearsOne thing to mention is that, in my testing and a really old comment by someone else it seems you can't have an always-on scrollbar AND the momentum-like scrolling that people are used to with iOS. Doing the momentum-scrolling CSS caused my custom scrollbars to disappear.
-
infinito84 about 8 yearsWorks perfect on cordova/phonegap (iOS 7 y Android 4.4), thank you!
-
Matstar over 7 yearsHaven't verified this lately, but I found this note in our CSS that referenced this solution: "Note that this will show OS X style scrollbars e.g. in Chrome on Windows."
-
Deepak Joy Cheenath over 7 yearsOn mobile Sarari browsers (or webviews), the scroll doesn't work as smoothly after adding this. Is there a solution?
-
Joe Lloyd over 7 yearsthis solution makes the scrollbar push out to the side. ie removes it as an overlay. So does not really solve making scrollbars just visible