How to Hide the scrollbar on an HTML page using CSS ?
- 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:
- 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.
- 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.