Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I force a vertical scrollbar to appear? [duplicate]

Tags:

css

margin

My site has both very short and longer pages. Since I center it in the viewport with margin: 0 auto, it jumps around a few pixels when switching from a page that has a scrollbar to one that hasn't and the other way around.

Is there a way to force the vertical scrollbar to always appear, so my site stays put when browsing it?

like image 383
Bakabaka Avatar asked Jul 11 '14 14:07

Bakabaka


People also ask

How do I force always show scrollbars?

To show the scrollbars always on the webpage, use overflow: scroll Property. It will add both horizontal and vertical scrollbars to the webpage. To add only horizontal scrollbar use overflow-x: scroll property and for vertical scrollbar use overflow-y: scroll property.

How do I set my vertical scrollbar?

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.

How do I restore the vertical scroll bar in Chrome?

Open a Chrome window. In the address bar, enter "chrome://flags," and navigate to that page. Scroll down to Overlay Scrollbars, and set the field to "Disabled." Restart your browser window, and your scrollbars should work again in PicMonkey.


2 Answers

Give your body tag an overflow: scroll;

body {     overflow: scroll; } 

or if you only want a vertical scrollbar use overflow-y

body {     overflow-y: scroll; } 
like image 54
John Conde Avatar answered Sep 22 '22 03:09

John Conde


html { overflow-y: scroll; } 

This css rule causes a vertical scrollbar to always appear.

Source: http://css-tricks.com/snippets/css/force-vertical-scrollbar/

like image 31
Bakabaka Avatar answered Sep 24 '22 03:09

Bakabaka