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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

body   height 101     will  crop  larger pages   Instead  I use   body   min-height 101

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

html       overflow  -moz-scrollbars-vertical       overflow-y  scroll      This make the scrollbar always visible and only active when needed    Update  If the above does not work the just using this may    html       overflow-y scroll

User · Answer

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

User · Answer

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

User · Answer

body        min-height  101vh        works the best for me

[html] Making the main scrollbar always visible

Examples related to html

Examples related to css

Examples related to xhtml