35

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

Community
  • 1
  • 1
pab
  • 971
  • 4
  • 17
  • 30
  • Have you looked at http://stackoverflow.com/questions/4050076/how-to-always-show-scrollbar-in-browser-using-javascript? That's a fairly common approach (and the accepted answer doesn't actually use javascript :-) – dash Sep 25 '12 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. Sep 28 '14 at 14:52
  • Looking for a better solution? Head here: https://stackoverflow.com/q/52220073/712334 – vhs Sep 08 '18 at 14:52

2 Answers2

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; 
}
dash
  • 89,546
  • 4
  • 51
  • 71
  • 5
    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! – dash Sep 25 '12 at 12:09
  • 1
    To avoid double scrollbars, I strongly recommend to use `body { overflow-y: scroll; }` instead. – niry Sep 22 '16 at 17:51
14
html {
    overflow-y: scroll; 
}

It is the best solution.

Salketer
  • 14,263
  • 2
  • 30
  • 58
  • 3
    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. – stevenvh May 16 '14 at 17:17
  • 2
    overflow at body level will cause a double scrollbar on some (IE6) browsers. – Salketer May 19 '14 at 05:59