How do I make the scroll bar on a div more visible?

Question

I'm working on a website and have a div filled with photos. You need to scroll down to see all the photos. The div is scrollable, but I have been asked to make it more obvious that you can scroll, since people wouldn't immediately think it is scrollable. I have tried searching online but can not find an answer to my question.

Basically how can I make my scroll bar more visible, or how can I make it obvious that you can scroll down to see more?

In case it helps, here's the css for that div

.gallery{
position: absolute;
left:40%;
margin:0 auto;
width: 600px;
height: 500px;

overflow: -moz-scrollbars-vertical; 
overflow-y:scroll;

}

You can style them in terms of using CSS, but you'll run into some cross browser issues. Firefox being one that doesn't support it. See this post for more details, http://stackoverflow.com/questions/7725652/css-scrollbar-style-cross-browser — Chris Yongchu, Aug 26 '15 at 19:45

score 0 · Answer 1 · answered Aug 26 '15 at 19:47

You can change the color of the scrollbar using webkit, but firebox won't be supported. Not sure if thats an issue.

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

http://jsfiddle.net/hmartiro/Xck2A/1/

score 0 · Answer 2 · answered Aug 26 '15 at 19:56

0

There's no cross-browser-supported way to style scrollbars in CSS as of this writing.

That leaves two options for a cross-browser solution:

Roll your own scrolling functionality in JS. You would be emulating native functionality. You run a high risk of breaking performance or usability of your app.
Approach the issue with a different solution than larger scrollbars. Are users missing the scrollbars because of the page layout? Does the div need overflow to be hidden? If you can't fix it any other way you could overlay a graphic near the bottom of the div highlighting the fact that more content is available and scrollable. You'd have to add and remove the graphic/notice via JS.

answered Aug 26 '15 at 19:56

Yair

182
2
10

every single solution I've seen that uses JS to mimick the browser is substandard in some way for usability reasons, see this: http://qahatesyou.com/wordpress/2015/07/there-must-be-fifty-ways-to-scroll-your-window/ – Toni Leigh Aug 26 '15 at 20:26
@ToniLeigh I completely agree. I included it as an option for if he absolutely _must_ have a cross browser styled scrollbar. – Yair Aug 26 '15 at 20:31

score 0 · Answer 3 · edited May 23 '17 at 11:58

As other posters have mentioned there's no consistent way of doing this. You can target webkit browsers with a set of webkit specific css properties, as documented here, but these will only hit webkit browsers, so no IE or FireFox. This SO answer is more complete, but still FireFox does not allow this.

I definitely wouldn't advise using JS, you'll be around for a long time ensure that every interaction that causes scroll works (and triggers every scroll event) in all the browsers. This sort of thing is not easy (see how many ways there are to scroll here) and often it's the usability and accessibility that suffers in return for consistent prettiness, which is a major design fail.

You also have problems to do with scrollbars being hidden on many devices by default. Macs often do this and small screens do it for screen real estate reasons. You have no control over these OS and browser manufacturer decisions or user preferences.

The best solution to this problem is probably to design out the internal scrollbar.

Internal scrollbars are quite nasty for two reasons:

They catch the full page scroll in an awkward and sometimes unpredictable manner;
They are not an easy target to manually hit, scrollbars on the side benefit from Fitts Law, internal scrollbars do not.

There are many other design patterns for image galleries, even a carousel would be preferred.

How do I make the scroll bar on a div more visible?

3 Answers3