Hiding the scroll bar on an HTML page

Question

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

Answer 1

You can accomplish this with a wrapper div that has its 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.

JSFiddle

HTML

    

        ...
    

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}