Making the main scrollbar always visible - without scroll

Question

I have a section of text that I want to always show the vertical scrollbar handle even before the user has scrolled. I've read the answer is

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

However that does not seem to initially show the scroll bar. It only shows it once the user has started scrolling. How would I show it always regardless if they have started scrolling or not? Is this possible?

Thanks!

JS fiddle for example of it not showing before scroll:

https://jsfiddle.net/5k59dxjy/

It appears to work fine in chrome. What browser are you having issues in? — JD Davis, Sep 13 '17 at 16:01
My test machine is windows, but I can check from within MacOS as well — JD Davis, Sep 13 '17 at 16:03
Please view [this question](https://stackoverflow.com/questions/7855590/preventing-scroll-bars-from-being-hidden-for-macos-trackpad-users-in-webkit-blin). It seems to address your issue in MacOS — JD Davis, Sep 13 '17 at 16:05
@JDDavis That did it! Now it works on Mac and iOS. Thank you. Type that as an answer and I'll accept. :) — AndrewLeonardi, Sep 13 '17 at 16:08

score 1 · Accepted Answer · answered Sep 13 '17 at 16:17

The behavior works as expected on Windows machines, but it appears MacOS and iOS have their own handling of scrollbars. You can see this issue addressed in this question.

Some of the options listed within the answer are to style the scrollbar manually like so:

.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; 
}

You can also use javascript to manually scroll the scrollbar on page load, just a single pixel. Like this:

$('#scrollable-section').scrollTop(1).scrollTop(0);

Thanks for the help JD! – AndrewLeonardi Sep 13 '17 at 16:26 — AndrewLeonardi, Sep 13 '17 at 16:26

Making the main scrollbar always visible - without scroll

1 Answers1