How to Hide the scrollbar on an HTML page using CSS ?

Html Code 
<style type="text/css">
body {
    overflow:hidden;
}
		          </style>

  • Set overflow: hidden; on the body tag like this:
Html code 
<style type="text/css">
body {
    overflow:hidden;
}
		          </style>
  • The code above hides both horizontal and vertical scrollbar.

If you want to hide only the vertical scrollbar, use overflow-y:

Html Code 
<style type="text/css">
body {
    overflow-y:hidden;
}
		         </style>
  • And if you want to hide only the horizontal scrollbar, use overflow-x:
Html Code 
<style type="text/css">
body {
    overflow-x:hidden;
}
</style>

  • This works for webkit:
Css code 
#element::-webkit-scrollbar { 
    display: none; 
}
  • If you want all scrollbars hidden, use
Css Code 
::-webkit-scrollbar { 
    display: none; 
}
::-webkit-scrollbar { 
    display: block; 
}

[ad type=”banner”]

  • You can of course always use width: 0, which can than be easily restored with width: auto.

  • You can accomplish this with a wrapper div that has it’s overflow hidden, and the inner div set to auto.
  • To remove the inner div’s scroll bar, you can pull it out of the outer div’s viewport by applying a negative margin to the inner div.
  • Then apply equal padding to the inner div so that the content stays in view.

HTML :

Html Code 
<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS :

Css Code 
.hide-scroll {
    overflow: hidden;}
.viewport {
    overflow: auto;
    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;
    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;}

  • We can do this :
Html code 
<div class="contentScroller">
<div class="content">
</div>
</div>
.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

  • You can use the CSS property overflow and -ms-overflow-style with a combination with ::-webkit-scrollbar.
  • Tested on IE10+, Firefox, Safari and Chrome and works good:
Css Code 
.container {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

[ad type=”banner”]

  • when you hide the scrollbar with padding-right, because the default scrollbar width is different on each browser.

Note: In the latest versions of Firefox the -moz-scrollbars-none property is deprecated ( link ).

  • Use css overflow property:
Css Code 
.noscroll {
  width:150px;
  height:150px;
  overflow: auto; /* or hidden, or visible */
}

  • Here’s a jsfiddle, which uses the solution below to hide a horizontal scrollbar.
Css Code 
.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

  • To disable vertical scroll bar just add : overflow-y:hidden;

  • Cross Browser Approach to hiding the scrollbar.
Css Code 
/* make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;}
/* safari and chrome specific style, don't need to make parent invisible because we can style webkit scrollbars */
#parent:not(*:root) {
  visibility: visible;}
/* make safari and chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;}
/* make the child visible */
#child {
    visibility: visible;}

HTML :

Html Code 
<h1>Wikitechy</h1>
<div id="box">
    <div id="content">
        <p>Hi !!! Welcome to Wikitechy</p>
    </div>

CSS :

Css Code 
h1{font-weight:bold;font-size:2em;} /* ignore only for header */
/* *********************** */
div#box{
    height:200px;    width:300px;  overflow:hidden;
    border:1px solid black;
    padding: 10px;}
div#content{
    height:200px;
    width:326px;    /*
     * Uncomment to see scrollbar
    width:300px;    */
    overflow:auto;}
[ad type=”banner”]

Categorized in:

CSSHTML

Tagged in:

, , , , , , , , , , , , , , , ,