Hide scroll bars on the body but still allow scrolling

Hide the scroll bars on the body element but still allow scrolling in pure CSS.

by William Green

HTML

<div id="scrollable">
    <div id="content">
        <img src="http://dougleschan.com/the-recruitment-guru/wp-content/uploads/2015/08/Beautiful-Wallpapers-14.jpg">
    </div>
</div>

CSS

body {
    position: relative;
    width:100%;
    height:100%;
    overflow: hidden;
    padding:0;
    margin:0;
}
#scrollable {
    height: calc(100% + 40px);
    width: calc(100% + 40px);
    overflow: scroll;
}
#content {
    width:100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html{
    overflow:hidden;
    width:100%;
    height:100%;
}