[ Solved – 10 Answers ] CSS – HTML – Hiding the scrollbar on an HTML page

PROBLEM :

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

[pastacode lang=”markup” manual=”%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Abody%20%7B%0A%20%20%20%20overflow%3Ahidden%3B%0A%7D%0A%09%09%20%20%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

SOLUTION 1:

• Set overflow: hidden; on the body tag like this:

[pastacode lang=”markup” manual=”%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Abody%20%7B%0A%20%20%20%20overflow%3Ahidden%3B%0A%7D%0A%09%09%20%20%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A” message=”Html code” highlight=”” provider=”manual”/]

• The code above hides both horizontal and vertical scrollbar.

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

[pastacode lang=”markup” manual=”%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Abody%20%7B%0A%20%20%20%20overflow-y%3Ahidden%3B%0A%7D%0A%09%09%20%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

• And if you want to hide only the horizontal scrollbar, use overflow-x:

[pastacode lang=”markup” manual=”%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Abody%20%7B%0A%20%20%20%20overflow-x%3Ahidden%3B%0A%7D%0A%3C%2Fstyle%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

SOLUTION 2:

• This works for webkit:

[pastacode lang=”css” manual=”%23element%3A%3A-webkit-scrollbar%20%7B%20%0A%20%20%20%20display%3A%20none%3B%20%0A%7D%0A” message=”Css code” highlight=”” provider=”manual”/]

• If you want all scrollbars hidden, use

[pastacode lang=”css” manual=”%3A%3A-webkit-scrollbar%20%7B%20%0A%20%20%20%20display%3A%20none%3B%20%0A%7D%0A%3A%3A-webkit-scrollbar%20%7B%20%0A%20%20%20%20display%3A%20block%3B%20%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

[ad type=”banner”]

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

SOLUTION 3:

• 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 :

[pastacode lang=”markup” manual=”%3Cdiv%20class%3D%22hide-scroll%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22viewport%22%3E%0A%20%20%20%20%20%20%20%20…%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

CSS :

[pastacode lang=”css” manual=”.hide-scroll%20%7B%0A%20%20%20%20overflow%3A%20hidden%3B%7D%0A.viewport%20%7B%0A%20%20%20%20overflow%3A%20auto%3B%0A%20%20%20%20%2F*%20Make%20sure%20the%20inner%20div%20is%20not%20larger%20than%20the%20container%0A%20%20%20%20%20*%20so%20that%20we%20have%20room%20to%20scroll.%0A%20%20%20%20%20*%2F%0A%20%20%20%20max-height%3A%20100%25%3B%0A%20%20%20%20%2F*%20Pick%20an%20arbitrary%20margin%2Fpadding%20that%20should%20be%20bigger%0A%20%20%20%20%20*%20than%20the%20max%20width%20of%20all%20the%20scroll%20bars%20across%0A%20%20%20%20%20*%20the%20devices%20you%20are%20targeting.%0A%20%20%20%20%20*%20padding%20%3D%20-margin%0A%20%20%20%20%20*%2F%0A%20%20%20%20margin-right%3A%20-100px%3B%0A%20%20%20%20padding-right%3A%20100px%3B%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 4:

• We can do this :

[pastacode lang=”markup” manual=”%3Cdiv%20class%3D%22contentScroller%22%3E%0A%3Cdiv%20class%3D%22content%22%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A.contentScroller%20%7Boverflow-y%3A%20auto%3B%20visibility%3A%20hidden%3B%7D%0A.content%20%7Bvisibility%3A%20visible%3B%7D%0A” message=”Html code” highlight=”” provider=”manual”/]

SOLUTION 5:

• 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:

[pastacode lang=”css” manual=”.container%20%7B%0A%20%20%20%20-ms-overflow-style%3A%20none%3B%20%20%2F%2F%20IE%2010%2B%0A%20%20%20%20overflow%3A%20-moz-scrollbars-none%3B%20%20%2F%2F%20Firefox%0A%7D%0A.container%3A%3A-webkit-scrollbar%20%7B%20%0A%20%20%20%20display%3A%20none%3B%20%20%2F%2F%20Safari%20and%20Chrome%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

[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 ).

SOLUTION 6:

• Use css overflow property:

[pastacode lang=”css” manual=”.noscroll%20%7B%0A%20%20width%3A150px%3B%0A%20%20height%3A150px%3B%0A%20%20overflow%3A%20auto%3B%20%2F*%20or%20hidden%2C%20or%20visible%20*%2F%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 7:

• Here’s a jsfiddle, which uses the solution below to hide a horizontal scrollbar.

[pastacode lang=”css” manual=”.scroll-wrapper%7B%0A%20%20%20%20overflow-x%3A%20scroll%3B%0A%7D%0A.scroll-wrapper%3A%3A-webkit-scrollbar%20%7B%20%0A%20%20%20%20display%3A%20none%3B%20%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 8:

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

SOLUTION 9:

• Cross Browser Approach to hiding the scrollbar.

[pastacode lang=”css” manual=”%2F*%20make%20parent%20invisible%20*%2F%0A%23parent%20%7B%0A%20%20%20%20visibility%3A%20hidden%3B%0A%20%20%20%20overflow%3A%20scroll%3B%7D%0A%2F*%20safari%20and%20chrome%20specific%20style%2C%20don’t%20need%20to%20make%20parent%20invisible%20because%20we%20can%20style%20webkit%20scrollbars%20*%2F%0A%23parent%3Anot(*%3Aroot)%20%7B%0A%20%20visibility%3A%20visible%3B%7D%0A%2F*%20make%20safari%20and%20chrome%20scrollbar%20invisible%20*%2F%0A%23parent%3A%3A-webkit-scrollbar%20%7B%0A%20%20visibility%3A%20hidden%3B%7D%0A%2F*%20make%20the%20child%20visible%20*%2F%0A%23child%20%7B%0A%20%20%20%20visibility%3A%20visible%3B%7D” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 10:

HTML :

[pastacode lang=”markup” manual=”%3Ch1%3EWikitechy%3C%2Fh1%3E%0A%3Cdiv%20id%3D%22box%22%3E%0A%20%20%20%20%3Cdiv%20id%3D%22content%22%3E%0A%20%20%20%20%20%20%20%20%3Cp%3EHi%20!!!%20Welcome%20to%20Wikitechy%3C%2Fp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

CSS :

[pastacode lang=”css” manual=”h1%7Bfont-weight%3Abold%3Bfont-size%3A2em%3B%7D%20%2F*%20ignore%20only%20for%20header%20*%2F%0A%2F*%20***********************%20*%2F%0Adiv%23box%7B%0A%20%20%20%20height%3A200px%3B%20%20%20%20width%3A300px%3B%20%20overflow%3Ahidden%3B%0A%20%20%20%20border%3A1px%20solid%20black%3B%0A%20%20%20%20padding%3A%2010px%3B%7D%0Adiv%23content%7B%0A%20%20%20%20height%3A200px%3B%0A%20%20%20%20width%3A326px%3B%20%20%20%20%2F*%0A%20%20%20%20%20*%20Uncomment%20to%20see%20scrollbar%0A%20%20%20%20width%3A300px%3B%20%20%20%20*%2F%0A%20%20%20%20overflow%3Aauto%3B%7D%0A” message=”Css Code” highlight=”” provider=”manual”/] [ad type=”banner”]