Hiding the scroll bar on an HTML page

browser, css, scrollbar

Solution

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

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

The code above "hides" both the horizontal and vertical scrollbars.

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

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

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

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

Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as `offsetLeft`), so the element is still a scroll container. (source)

Problem

Can CSS be used to hide the scroll bar? How would you do this?

Original source

Related problems