Always show browser scrollbar to prevent page jumping [duplicate]

Question

Possible Duplicate:
How to always show scrollbar in browser using javascript?

Some pages I have have lots of content other pages have a few lines, so when I am clicking between pages some pages have a scrollbar on the browsers and others don't. Because of this the page jumps all the time due to the extra space when clicking between pages.

Is it possible to have the scrollbar visible at all times, or greyed out if there is not a lot of content to stop the jumping of pages?

Can it work across all browsers, hope someone can help,

Cheers

Have you looked at stackoverflow.com/questions/4050076/…? That's a fairly common approach (and the accepted answer doesn't actually use javascript :-) — dash
– dash, Commented Sep 25, 2012 at 12:04
Interestingly, the problem of "jump" does not exist in IE11. Looks like IE11 slaps the scrollbar right over the content, so no width changes and no jumps. — Philip P.
– Philip P., Commented Sep 28, 2014 at 14:52
Looking for a better solution? Head here: stackoverflow.com/q/52220073/712334 — vhs
– vhs, Commented Sep 8, 2018 at 14:52

dash · Accepted Answer · 2012-09-25 12:07:55Z

60

Try reading this article by Chris Coyer, it explains it pretty well.

From the article:

Assigning overflow-y to scroll does work, and it works in Firefox, Safari, and IE 6, and that makes it the best solution:

html { overflow-y: scroll; }

edited Sep 25, 2012 at 12:07

dash

91.7k4 gold badges54 silver badges72 bronze badges

answered Sep 25, 2012 at 12:05

user818991

Sign up to request clarification or add additional context in comments.

2 Comments

dash Over a year ago

I've updated your answer to include the relevant section from the linked article; remember, there is no guarantee that what you link to today will be there tomorrow!

niry Over a year ago

To avoid double scrollbars, I strongly recommend to use body { overflow-y: scroll; } instead.

Salketer · Accepted Answer · 2012-09-25 12:08:30Z

14

html { overflow-y: scroll; }

It is the best solution.

answered Sep 25, 2012 at 12:08

Salketer

15.8k2 gold badges32 silver badges64 bronze badges

2 Comments

stevenvh Over a year ago

Not quite the best solution. Granted the html tag includes body, but also head, where the CSS makes no sense. It's better to define the property at the body level.

Salketer Over a year ago

overflow at body level will cause a double scrollbar on some (IE6) browsers.

Collectives™ on Stack Overflow

Always show browser scrollbar to prevent page jumping [duplicate]

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related