Hide scroll bar of nested div, but still make it scrollable [duplicate]

Answer 1

If you know all containers that can be scrollable, you can hide scrollbar with CSS and a little bit of JS. For webkit-based browsers (safari, google chrome, opera) it will be CSS-only solution to set scrollbar width to 0. For IE, Firefox and other non-webkit browsers you should calculate scrollbar width that will be used as negative margin-right for you scrollable content.

To do so you should wrap your content into div with overflow-y:scroll to always show vertical scrollbar and hide this scrollbar with margin-right:-17px and parent overflow:hidden. Example is here. No need to set fixed width, nor height.

This is the way that used in jQuery Scrollbar. Hiding horizontal scrollbar is more complicated and requires to handle content changes to recalculate container height.

Answer 2

scollbars take up around 20px so just make you scrollable div 20px taller and 20px wider and your scrollbars will be hidden:

#content {
    background-color: red;
    width: 520px;
    height: 520px;
    overflow: auto;
}

Example