htmlcssbrowserscrollbar

Hiding the scroll bar on an HTML page


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


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)