Categories
CSS Web Development

Avoid 'page jump' by forcing a scroll bar

Occasionally a web page jumps horizontally because a switch of page or change of content causes a vertical scroll bar to appear.

This can be avoided with a little CSS trick;

1
2
3
  html {
    overflow-y: scroll;
  }

This can be placed in the <head> element of a page that is prone to the problem, or in the header include file for a site.

The result of this is that when a vertical scroll bar is not needed on a site, its place is taken by an unobtrusive pseudo-scroll bar, greyed out like other inactive controls.