How to Prevent Scrollbar from Repositioning Web Page

When you center a page with CSS, the page may move slightly on some browsers when navigating between pages. The reason is that the scrollbar is hidden with short pages and displayed again with long pages. The common fix for this is using the overflow-y property set to “scroll”.

In our snippet, we’ll demonstrate how it can be done.

Create HTML

  • Use an <h1> element.
  • Use <section> elements and add <h2> and <h3> elements inside.
  • Add also <p> elements.
<h1>Example</h1>
<section>
  <h2>Hypertext markup language HTML</h2>
  <p>
    HTML, an acronym for HyperText Markup Language, is a primary markup language for creating websites. It consists of a series of codes used to structure texts, images, and other content to be displayed in a browser.
  </p>
  <section>
    <h3>HTML Tags</h3>
    <p>
      HTML Basic Tags are used to structure website content (text, hyperlinks, images, media, etc). Tags only "instruct" browsers how to show the content of the web page. HTML Tags chapter suggests the most frequently used tags in HTML with their examples.
    </p>
  </section>
</section>
<section>
  <h2>CSS</h2>
  <p>
    CSS stands for Cascading Style Sheets is a language that is designed to format the layout of Web pages. It is used to enable the separation of presentation and content, which includes layout, colors, and fonts.
  </p>
</section>

Add CSS

  • Set the overflow-y property to “scroll” for the <html> element.
html {
  overflow-y: scroll;
}

Let’s see the full example.

Example of preventing scrollbar from repositioning web page:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <h1>Example</h1>
    <section>
      <h2>Hypertext markup language HTML</h2>
      <p>
        HTML, an acronym for HyperText Markup Language, is a primary markup language for creating websites. It consists of a series of codes used to structure texts, images, and other content to be displayed in a browser.
      </p>
      <section>
        <h3>HTML Tags</h3>
        <p>
          HTML Basic Tags are used to structure website content (text, hyperlinks, images, media, etc). Tags only "instruct" browsers how to show the content of the web page. HTML Tags chapter suggests the most frequently used tags in HTML with their examples.
        </p>
      </section>
    </section>
    <section>
      <h2>CSS</h2>
      <p>
        CSS stands for Cascading Style Sheets is a language that is designed to format the layout of Web pages. It is used to enable the separation of presentation and content, which includes layout, colors, and fonts.
      </p>
    </section>
  </body>
</html>

In the example above, the scrollbar appears on the page and will always appear, no matter It is required or not. When the scrollbar is not needed, it will be grayed out. So, the page doesn’t move, and the usability is also preserved.