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:
[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:
[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”]