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”/]- Set overflow: hidden; on the body tag like this:
- 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:
- This works for webkit:
- If you want all scrollbars hidden, use
- 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 :
[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”/]- We can do this :
- 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:
- 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:
- Here’s a jsfiddle, which uses the solution below to hide a horizontal scrollbar.
- To disable vertical scroll bar just add : overflow-y:hidden;
- Cross Browser Approach to hiding the scrollbar.
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”/]
Wikitechy Editor