Hiding the scroll bar on an HTML page

user_386263 0
Viewed 1917112

Can CSS be used to hide the scroll bar? How would you do this?

scrollbar browser css
22 Answers

Here's my solution, which theoretically covers all modern browsers:

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html can be replaced with any element you want to hide the scrollbar of.

Note: I've skimmed the other 19 answers to see if the code I'm posting has already been covered, and it seems like no single answer sums up the situation as it stands in 2019, although plenty of them go into excellent detail. Apologies if this has been said by someone else and I missed it.

user_28516280

Copy this CSS code to the customer code for hiding the scroll bar:

<style>

    ::-webkit-scrollbar {
       display: none;
    }

    #element::-webkit-scrollbar {
       display: none;
    }

</style>
user_62772010

Can CSS be used to hide the scroll bar? How would you do this?

If you wish to remove vertical (and horizontal) scrollbars from a browser viewport, add:

style="position: fixed;"

to the <body> element.

Javascript:

document.body.style.position = 'fixed';

CSS:

body {
  position: fixed;
}
user_38977750

In addition to Peter's answer:

In case you want to remove the scrollbar from an iframe, you would need to add the styles for removing the scrollbar within the website which is iframed. It is not possible to style elements within an iframe including the scrollbar.

Website which has an iframe:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Page Title</title>
  <body>
   <iframe src="/iframe"></iframe>
  </body>
</html>

Website which is iframed:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Page Title</title>

  <style>
  html, body {
    margin: 0;
    padding: 0
  }
  .content {
    scrollbar-width: none;
  }

  .content::-webkit-scrollbar {
    display: none;
  }

  .content {
    height: 100vh;
    overflow: scroll;
  }
  </style>

  <body>
    <div class="content">
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
    </div>
  </body>
</html>
user_76036630
Related