What CSS is required to make the browser's vertical scrollbar remain visible when a user visits a web page (when the page hasn't enough content to trigger the scrollbar's activation)?
12 Answers
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
This makes the scrollbar always visible and only active when needed.
Update: If the above does not work then just using this may.
html {
overflow-y:scroll;
}
-
3Do you have any idea what version of FF brought support for
overflow-y
? As it seems that-moz-scrollbars-vertical
is deprecated in favor of theoverflow-y
property. Commented Jul 29, 2009 at 19:41 -
I think Internet Explorer 6.x+, Firefox 1.5+ if I remember correctly. I've been using the above code and it works in FF1.5-3.5.1 and IE6-8 for me.– Corv1nusCommented Jul 29, 2009 at 19:43
-
2Are there any alternatives to "page jumping" when certain pages on your site are too small to have a scroll bar and others are? Or is this the "best practice"? I'll have to admit, I don't see many pages out on the webs that don't take up a full page.– JessCommented Sep 26, 2013 at 17:33
-
3I'm not sure if it's a best practice but, having scrollbars on all pages, and active only when necessary, to avoid page jumping is usually an acceptable solution. I tend to prefer the constant scrollbar over the jump.– Corv1nusCommented Sep 26, 2013 at 18:50
-
2For those (like me) who find styling
html
a bit hack-y, note that you can use the structural pseudo-selector:root
instead ofhtml
. See: developer.mozilla.org/en-US/docs/Web/CSS/:root– RouninCommented Feb 22, 2018 at 13:31
Make sure overflow is set to "scroll" not "auto." With that said, in OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will still only show when being used. So if any the solutions above don't appear to be working that might be why.
This is what you'll need to fix it:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
You can style it accordingly if you don't like the default.
-
4This thing work! But how can you make it only on a specific div?– RichCommented Feb 13, 2019 at 9:38
-
3@Rich just like any other css element. .yourdiv::-webkit-scrollbar {...}– KrisCommented Feb 13, 2019 at 15:12
-
@Kris Hi, thanks for the answer, here is the example of it. stackoverflow.com/a/54667091/2637261– RichCommented Feb 14, 2019 at 1:43
-
2
-
This is the only one that works. The ubiquitous
overflow-y:scroll;
does not work. Commented May 13, 2022 at 2:05
Things have changed in the last years. The answers above are not valid in all cases any more. Apple is pushing disappearing scrollbars everywhere. Safari, Chrome and even Firefox on MacOs (and iOs) only show scrollbars when actually scrolling — I don't know about current Windows/IE. However there are non-standard ways to style scroll bars on Webkit (IE dropped that a long time ago).
-
-
3Thanks for this excellent point on the disappearing scrollbars. For me the reason to keep the scrollbar visible was to avoid that slight but very noticeable and very annoying jerk as content changes from having scroll to not. With the disappearing scrollbars, they dont jerk the body when they show and hide so its ok for me. But thanks for this excellent point. Commented Sep 17, 2015 at 18:29
-
14From a UX standpoint, most times we want the scrollbar visible. Per the current trend, If a scrollbar is not visible, it is additional step to have to "try out" a visible list for more in the list. An additional visual clue that the drop down or list has more items in it is not needed if people see a scrollbar. Commented Mar 2, 2016 at 16:20
html {
overflow-y: scroll;
}
Is that what you want?
Unfortunately, Opera 9.64 seems to ignore that CSS declaration when applied to HTML
or BODY
, although it works for other block-level elements like DIV
.
body { height:101%; }
will "crop" larger pages.
Instead, I use:
body { min-height:101%; }
-
1This question was asked 5 years ago and it already has an accepted answer. Your answer does not provide a better answer than the already accepted answer. Commented Jul 14, 2015 at 20:15
-
29This answer does actually provide additional information not provided in the other answers. Commented Aug 11, 2015 at 23:09
html {height: 101%;}
I use this cross browsers solution (note: I always use DOCTYPE declaration in 1st line, I don't know if it works in quirksmode, never tested it).
This will always show an ACTIVE vertical scroll bar in every page, vertical scrollbar will be scrollable only of few pixels.
When page contents is shorter than browser's visible area (view port) you will still see the vertical scrollbar active, and it will be scrollable only of few pixels.
In case you are obsessed with CSS validation (I'm obesessed only with HTML validation) by using this solution your CSS code would also validate for W3C because you are not using non standard CSS attributes like -moz-scrollbars-vertical
-
1
-
1Not an elegant solution, having it scrollable by only a few pixels is annoying. Commented Jan 20, 2023 at 18:50
An alternative approach is to set the width of the html element to 100vw. On many if not most browsers, this negates the effect of scrollbars on the width.
html { width: 100vw; }
I was able to get this to work by adding it to the body tag. Was nicer for me because I don't have anything on the html element.
body {
overflow-y: scroll;
}
Setting height to 101% is my solution to the problem. You pages will no longer 'flick' when switching between ones that exceed the viewport height and ones that do not.
I do this:
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
Then I don't have to look at the ugly greyed out scrollbar when it's not needed.
-
1
html { height:initial!important; }
You may not need the !important - depends on what CSS is in place.