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 */ }
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.
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; }
Information:
Based on this answer, I created a simple scroll plugin.