Hide scroll bar, but while still being able to scroll

Just a test which is working fine.

#parent{    width: 100%;    height: 100%;    overflow: hidden;}#child{    width: 100%;    height: 100%;    overflow-y: scroll;    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */    box-sizing: content-box; /* So the width will be 100% + 17px */}

Working Fiddle

JavaScript:

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

Or

Using Position: absolute,

#parent{    width: 100%;    height: 100%;    overflow: hidden;    position: relative;}#child{    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */    overflow-y: scroll;}

Working Fiddle

JavaScript Working Fiddle

Information:

Based on this answer, I created a simple scroll plugin.

It is easy in WebKit, with optional styling:

html {    overflow: scroll;    overflow-x: hidden;}::-webkit-scrollbar {    width: 0;  /* Remove scrollbar space */    background: transparent;  /* Optional: just make scrollbar invisible */}/* Optional: show position indicator in red */::-webkit-scrollbar-thumb {    background: #FF0000;}

This works for me with simple CSS properties:

.container {    -ms-overflow-style: none;  /* Internet Explorer 10+ */    scrollbar-width: none;  /* Firefox */}.container::-webkit-scrollbar {     display: none;  /* Safari and Chrome */}

For older versions of Firefox, use: overflow: -moz-scrollbars-none;