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?
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.
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.
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.
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; }
html { overflow-y: scroll; }
This css
rule causes a vertical scrollbar to always appear.
Source: http://css-tricks.com/snippets/css/force-vertical-scrollbar/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With