CODEWITHSUNDEEP
htmlcssxhtml
Deniz Dogan
Deniz Dogan

Reputation: 26227

Making the main scrollbar always visible

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

Upvotes: 229

Views: 409563

Answers (12)

Corv1nus
Corv1nus

Reputation: 4625

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

Upvotes: 389

Edmunds22
Edmunds22

Reputation: 801

html { height:initial!important; }

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

Upvotes: 0

Stian
Stian

Reputation: 1602

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.

Upvotes: 0

Lolo
Lolo

Reputation: 53

body { 
    min-height: 101vh; 
}

works the best for me

Upvotes: 0

Ionuț G. Stan
Ionuț G. Stan

Reputation: 179179

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.

Upvotes: 28

Scott
Scott

Reputation: 161

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

Instead, I use:

body { min-height:101%; }

Upvotes: 16

molls223
molls223

Reputation: 1436

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.

Upvotes: 69

lunelson
lunelson

Reputation: 571

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

Upvotes: 5

Frank Lämmer
Frank Lämmer

Reputation: 2325

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

Upvotes: 42

Jazzepi
Jazzepi

Reputation: 5490

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

Upvotes: 4

Marco Demaio
Marco Demaio

Reputation: 34427

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

Upvotes: 14

Sanjaal Corps
Sanjaal Corps

Reputation: 17

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.

Upvotes: 0

Related Questions