Return to Answer

UPDATE: Firefox now supports hiding scrollbars with CSS, so all major browsers are now covered (Chrome, Firefox, IE, Safari etc).

Simply apply the following CSS to the element you want to remove scrollbars from:

.container {
 overflow-y: scroll;
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none; /* IE 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
 width: 0;
 height: 0;
}

This is the least hacky cross browser solution that I'm currently aware of. Check out the demo.

ORIGINAL ANSWER:

Here's another way that hasn't been mentioned yet. It's really simple and only involves two divs and CSS. No JavaScript or proprietary CSS is needed and it works in all browsers. It doesn't require explicitly setting the width of the container either thus making it fluid.

This method uses negative margin to move the scrollbar out of the parent and then the same amount of padding to push the content back to its original position. The technique works for vertical, horizontal and two way scrolling.

Demos:

• Vertical
• Horizontal
• Both directions

Example code for the vertical version:

HTML:

<div class="parent">
 <div class="child">
 Your content.
 </div>
</div>

CSS:

.parent{
 width: 400px;
 height: 200px;
 border: 1px solid #aaa;
 overflow: hidden;
}
.child{
 height: 100%;
 margin-right: -50px; /* maximum width of scrollbar */
 padding-right: 50px; /* maximum width of scrollbar */
 overflow-y: scroll;
}

UPDATE:

Firefox now supports hiding scrollbars with CSS, so all major browsers are now covered (Chrome, Firefox, Internet Explorer, Safari, etc.).

Simply apply the following CSS to the element you want to remove scrollbars from:

.container {
 overflow-y: scroll;
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none; /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
 width: 0;
 height: 0;
}

This is the least hacky cross browser solution that I'm currently aware of. Check out the demo.

ORIGINAL ANSWER:

Here's another way that hasn't been mentioned yet. It's really simple and only involves two divs and CSS. No JavaScript or proprietary CSS is needed, and it works in all browsers. It doesn't require explicitly setting the width of the container either, thus making it fluid.

This method uses a negative margin to move the scrollbar out of the parent and then the same amount of padding to push the content back to its original position. The technique works for vertical, horizontal and two way scrolling.

Demos:

• Vertical
• Horizontal
• Both directions

Example code for the vertical version:

HTML:

<div class="parent">
 <div class="child">
 Your content.
 </div>
</div>

CSS:

.parent {
 width: 400px;
 height: 200px;
 border: 1px solid #AAA;
 overflow: hidden;
}
.child {
 height: 100%;
 margin-right: -50px; /* Maximum width of scrollbar */
 padding-right: 50px; /* Maximum width of scrollbar */
 overflow-y: scroll;
}

UPDATE: Firefox now supports hiding scrollbars with CSS, so all major browsers are now covered (Chrome, Firefox, IE, Safari etc). Simply apply the following CSS to the element you want to remove scrollbars from:

.container {
 overflow-y: scroll;
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none; /* IE 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
 width: 0;
 height: 0;
}

This is the least hacky cross browser solution that I'm currently aware of. Check out the demo.

ORIGINAL ANSWER:

Here's another way that hasn't been mentioned yet. It's really simple and only involves two divs and CSS. No JavaScript or proprietary CSS is needed and it works in all browsers. It doesn't require explicitly setting the width of the container either thus making it fluid.

This method uses negative margin to move the scrollbar out of the parent and then the same amount of padding to push the content back to its original position. The technique works for vertical, horizontal and two way scrolling.

Demos:

• Vertical
• Horizontal
• Both directions

Example code for the vertical version:

HTML:

<div class="parent">
 <div class="child">
 Your content.
 </div>
</div>

CSS:

.parent{
 width: 400px;
 height: 200px;
 border: 1px solid #aaa;
 overflow: hidden;
}
.child{
 height: 100%;
 margin-right: -50px; /* maximum width of scrollbar */
 padding-right: 50px; /* maximum width of scrollbar */
 overflow-y: scroll;
}

UPDATE: Firefox now supports hiding scrollbars with CSS, so all major browsers are now covered (Chrome, Firefox, IE, Safari etc).

Simply apply the following CSS to the element you want to remove scrollbars from:

.container {
 overflow-y: scroll;
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none; /* IE 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
 width: 0;
 height: 0;
}

This is the least hacky cross browser solution that I'm currently aware of. Check out the demo.

ORIGINAL ANSWER:

Here's another way that hasn't been mentioned yet. It's really simple and only involves two divs and CSS. No JavaScript or proprietary CSS is needed and it works in all browsers. It doesn't require explicitly setting the width of the container either thus making it fluid.

This method uses negative margin to move the scrollbar out of the parent and then the same amount of padding to push the content back to its original position. The technique works for vertical, horizontal and two way scrolling.

Demos:

• Vertical
• Horizontal
• Both directions

Example code for the vertical version:

HTML:

<div class="parent">
 <div class="child">
 Your content.
 </div>
</div>

CSS:

.parent{
 width: 400px;
 height: 200px;
 border: 1px solid #aaa;
 overflow: hidden;
}
.child{
 height: 100%;
 margin-right: -50px; /* maximum width of scrollbar */
 padding-right: 50px; /* maximum width of scrollbar */
 overflow-y: scroll;
}

UPDATE: Firefox now supports hiding scrollbars with CSS, so all major browsers are now covered (Chrome, Firefox, IE, Safari etc). Simply apply the following CSS to the element you want to remove scrollbars from:

.container {
 overflow-y: scroll;
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none; /* IE 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
 width: 0px;
}

This is the least hacky cross browser solution that I'm currently aware of. Check out the demo.

ORIGINAL ANSWER:

Here's another way that hasn't been mentioned yet. It's really simple and only involves two divs and CSS. No JavaScript or proprietary CSS is needed and it works in all browsers. It doesn't require explicitly setting the width of the container either thus making it fluid.

This method uses negative margin to move the scrollbar out of the parent and then the same amount of padding to push the content back to its original position. The technique works for vertical, horizontal and two way scrolling.

Demos:

• Vertical
• Horizontal
• Both directions

Example code for the vertical version:

HTML:

<div class="parent">
 <div class="child">
 Your content.
 </div>
</div>

CSS:

.parent{
 width: 400px;
 height: 200px;
 border: 1px solid #aaa;
 overflow: hidden;
}
.child{
 height: 100%;
 margin-right: -50px; /* maximum width of scrollbar */
 padding-right: 50px; /* maximum width of scrollbar */
 overflow-y: scroll;
}

UPDATE: Firefox now supports hiding scrollbars with CSS, so all major browsers are now covered (Chrome, Firefox, IE, Safari etc). Simply apply the following CSS to the element you want to remove scrollbars from:

.container {
 overflow-y: scroll;
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none; /* IE 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
 width: 0;
 height: 0;
}

This is the least hacky cross browser solution that I'm currently aware of. Check out the demo.

ORIGINAL ANSWER:

Here's another way that hasn't been mentioned yet. It's really simple and only involves two divs and CSS. No JavaScript or proprietary CSS is needed and it works in all browsers. It doesn't require explicitly setting the width of the container either thus making it fluid.

This method uses negative margin to move the scrollbar out of the parent and then the same amount of padding to push the content back to its original position. The technique works for vertical, horizontal and two way scrolling.

Demos:

• Vertical
• Horizontal
• Both directions

Example code for the vertical version:

HTML:

<div class="parent">
 <div class="child">
 Your content.
 </div>
</div>

CSS:

.parent{
 width: 400px;
 height: 200px;
 border: 1px solid #aaa;
 overflow: hidden;
}
.child{
 height: 100%;
 margin-right: -50px; /* maximum width of scrollbar */
 padding-right: 50px; /* maximum width of scrollbar */
 overflow-y: scroll;
}