Making the main scrollbar always visible

Question

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)?

To prevent [jumping scrollbars in Windows](https://stackoverflow.com/questions/52220073/prevent-jumping-scrollbar-in-windows) there is a [better solution](https://aykevl.nl/2014/09/fix-jumping-scrollbar). — vhs, Sep 08 '18 at 14:56

score 382 · Accepted Answer · edited Jul 30 '21 at 14:12

382

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

edited Jul 30 '21 at 14:12

Abdalla Arbab

1,360
3
23
29

answered Jul 29 '09 at 19:36

Corv1nus

4,523
1
26
37

3

Do 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 the `overflow-y` property. – Ionuț G. Stan Jul 29 '09 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. – Corv1nus Jul 29 '09 at 19:43
2

Are 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. – Jess Sep 26 '13 at 17:33
2

I'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. – Corv1nus Sep 26 '13 at 18:50
This is not working for me. I have added the exact css. – user2585299 Jun 20 '14 at 19:36
Can you show me the code, like in jsFiddle or something? – Corv1nus Jun 23 '14 at 13:53
@Corv1nus Copy and paste the above code to any valid location in your CSS. – joshreesjones Aug 05 '14 at 01:19
I updated it. -moz-scrollbars-vertical did not work in Chrome for me but, overflow-y: scroll did. Things change over 5 years. – Corv1nus Aug 05 '14 at 16:11
2

For those (like me) who find styling `html` a bit *hack-y*, note that you can use the structural pseudo-selector `:root` instead of `html`. See: https://developer.mozilla.org/en-US/docs/Web/CSS/:root – Rounin Feb 22 '18 at 13:31
why the hell it doesn't work for me!? is this really a complete answer? – vir us Apr 11 '18 at 12:58
This question asks for the scrollbar to be visible at all times and this solution does not do this. -1 – Ian Steffy Dec 11 '18 at 08:47
Hello, it works great with Macbook too, desktop computer but not with IPAD.Have you got a solution for IPAD , Iphone ? – Lorenzo Jun 24 '20 at 06:29
I unfortunately do not, as I don't use Apple devices all that much. Have you tried the other answers in the thread? They may do what you need. I wish I could be more helpful on that. – Corv1nus Jun 24 '20 at 13:56

score 63 · Answer 2 · answered Jul 07 '15 at 20:27

63

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.

answered Jul 07 '15 at 20:27

molls223

1,366
10
6

4

This thing work! But how can you make it only on a specific div? – Rich Feb 13 '19 at 09:38
2

@Rich just like any other css element. .yourdiv::-webkit-scrollbar {...} – Kris Feb 13 '19 at 15:12
@Kris Hi, thanks for the answer, here is the example of it. https://stackoverflow.com/a/54667091/2637261 – Rich Feb 14 '19 at 01:43
2

Why is this used `-webkit-appearance: none;` – Suraj Jain Apr 26 '20 at 15:36
This is the only one that works. The ubiquitous `overflow-y:scroll;` does not work. – Mote Zart May 13 '22 at 02:05

score 34 · Answer 3 · answered May 12 '14 at 12:52

34

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).

answered May 12 '14 at 12:52

Frank Lämmer

2,165
19
26

but it degrades gracefully right on those new ones ? – Ben May 27 '14 at 13:34
3

Thanks 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. – Noitidart Sep 17 '15 at 18:29
8

From 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. – windsurf88 Mar 02 '16 at 16:20

score 27 · Answer 4 · edited Sep 26 '16 at 21:32

27

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.

edited Sep 26 '16 at 21:32

Andrew Tobilko

48,120
14
91
142

answered Jul 29 '09 at 19:17

Ionuț G. Stan

176,118
18
189
202

score 14 · Answer 5 · edited Apr 01 '16 at 15:54

14

body { height:101%; } will "crop" larger pages.

Instead, I use:

body { min-height:101%; }

edited Apr 01 '16 at 15:54

Chris Marisic

32,487
24
164
258

answered Jul 14 '15 at 19:51

Scott

141
1
2

1

This 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. – Dipen Shah Jul 14 '15 at 20:15
26

This answer does actually provide additional information not provided in the other answers. – GaTechThomas Aug 11 '15 at 23:09

Marco Demaio · Answer 6 · 2013-02-17T14:51:33.957

13

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

edited Feb 17 '13 at 14:51

answered Mar 11 '10 at 13:41

Marco Demaio

33,578
33
128
159

1

Elegant solution – Artur Keyan Feb 16 '18 at 15:09
Not an elegant solution, having it scrollable by only a few pixels is annoying. – reddtoric Jan 20 '23 at 18:50

score 5 · Answer 7 · answered Jun 08 '15 at 08:13

5

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

answered Jun 08 '15 at 08:13

lunelson

561
6
11

score 3 · Answer 8 · answered Jul 28 '13 at 14:27

3

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

answered Jul 28 '13 at 14:27

Jazzepi

5,259
11
55
81

score 0 · Answer 9 · edited Feb 10 '12 at 15:07

0

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.

edited Feb 10 '12 at 15:07

rlemon

17,518
14
92
123

answered Jan 25 '11 at 18:16

Sanjaal Corps

17
2

score 0 · Answer 10 · edited Mar 07 '20 at 21:46

0

body { 
    min-height: 101vh; 
}

works the best for me

edited Mar 07 '20 at 21:46

Dharman

30,962
25
85
135

answered Mar 07 '20 at 21:38

Lolo

53
1
9

score 0 · Answer 11 · answered May 16 '20 at 04:24

0

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.

answered May 16 '20 at 04:24

Stian

1,522
2
22
52

1

The question asks for it to always be visible. – Corv1nus Jun 24 '20 at 13:58

score 0 · Answer 12 · answered Mar 25 '21 at 17:38

0

html { height:initial!important; }

You may not need the !important - depends on what CSS is in place.

answered Mar 25 '21 at 17:38

Edmunds22

715
9
10

Making the main scrollbar always visible

12 Answers12

Linked