0

I have a page with tabs that can display various height content, some of which require a scrollbar and some that don't. The visual effect of changing between these contents is kinda annoying though since when the window scrollbar pops into existence, it shifts the whole page left by just a little.

Things I've tried/considered:

  1. always having scrollbar visible - it works but I don't like it.
  2. setting the body width to 98% - apparently thats still 98% of the window which gets resized so still popping. Setting it to a pixel value works but people have different size screens.
  3. compensating the window width loss with a script - was a fairly simple script but funny enough, the window resize triggered by scrollbar appearing doesn't trigger the resize event of the window and I havent found any other suitable event to attach it to.

Does anybody know a good technique for keeping the page container in place?

user81993
  • 6,167
  • 6
  • 32
  • 64
  • 1
    Possible duplicate of [How to prevent scrollbar from repositioning web page?](http://stackoverflow.com/questions/1417934/how-to-prevent-scrollbar-from-repositioning-web-page) – Andy Ray Oct 14 '15 at 06:10
  • not exactly, he can adjust the page on load while mine can change height without reload – user81993 Oct 14 '15 at 06:14

2 Answers2

0

I guess you could add a class with margin/padding to the body and then remove it with jQuery. The downside of doing this is that different browsers have different width of the scrollbar and for instance safari on mac don't even have a visible scrollbar. So recommendation would be to just have the scrollbar visible all the time.

Dejan.S
  • 18,571
  • 22
  • 69
  • 112
0

The correct answer is

html { width: 100vw; }
user81993
  • 6,167
  • 6
  • 32
  • 64