1

When making a site that doesn't require scrolling, the content is centred. I have placed all page content within a div : #Pagecontent, which has its margins set to auto so that the width of the screen does not matter - the content is always in the centre.

However, when the page requires scrolling because of the length of the content, all of the content on the page shifts slightly. How can I prevent this, as I find it annoying.

Hope this is an okay question. Cheers!

OutofdepthNerd
  • 21
  • 1
  • 5

2 Answers2

0

The HTML with overflow: scroll will force the page to always show the scrollbar whether it needs it or not.

html{
   overflow:scroll;//for both vertical and horizontal 
   /*  overflow-y: scroll; // for only horizontal 
       overflow-x: scroll;  // for only vertical  */
}

But there is no way you can prevent scroll bars appearing on any normal site because it is 100% dependent on the visitors screen resolution and/or preference for a maximised window or not.

The only way to prevent scroll bars shifting your page contents is to disable them via javascript, which may make some of your page unreachable by some visitors

Good read: How to prevent scrollbar from repositioning web page?

Community
  • 1
  • 1
NullPoiиteя
  • 56,591
  • 22
  • 125
  • 143
  • This solution works, however, what if you have a modal on your site, and when that is shown you intentionally hide the scroll bar, and then when you show it again, content gets bumped, there must be a way to make it so the scroll bar doesn't get factored into the viewport calculation. – Dmitri Larionov Jan 04 '19 at 22:41
0

you can show the overflow all time by css overflow:scroll so the page wont move on the scroll bar

  • This works but seems like it isn't the best option, my intuition tells me this is a solved problem that doesn't require showing an unnecessary scroll bar. – Dmitri Larionov Jan 04 '19 at 22:42