iOS smoother scroll

An example of webkit-overflow-scrolling: touch effect

HTML

<div class="smooth-scroll">
    <p>Scroll with -webkit-overflow-scrolling: touch;</p>
    <p>Scroll with -webkit-overflow-scrolling: touch;</p>
    <p>Scroll with -webkit-overflow-scrolling: touch;</p>
    <p>Scroll with -webkit-overflow-scrolling: touch;</p>
    <p>Scroll with -webkit-overflow-scrolling: touch;</p>
    <p>Scroll with -webkit-overflow-scrolling: touch;</p>
    <p>Scroll with -webkit-overflow-scrolling: touch;</p>
    <p>Scroll with -webkit-overflow-scrolling: touch;</p>
    <p>Scroll with -webkit-overflow-scrolling: touch;</p>
    <p>Scroll with -webkit-overflow-scrolling: touch;</p>
    <p>Scroll with -webkit-overflow-scrolling: touch;</p>
    <p>Scroll with -webkit-overflow-scrolling: touch;</p>
</div>
<div>
    <p>Scroll with default espeficiations</p>
    <p>Scroll with default espeficiations</p>
    <p>Scroll with default espeficiations</p>
    <p>Scroll with default espeficiations</p>
    <p>Scroll with default espeficiations</p>
    <p>Scroll with default espeficiations</p>
    <p>Scroll with default espeficiations</p>
    <p>Scroll with default espeficiations</p>
    <p>Scroll with default espeficiations</p>
    <p>Scroll with default espeficiations</p>
    <p>Scroll with default espeficiations</p>
    <p>Scroll with default espeficiations</p>
</div>

CSS

/* some reset */
body {
    margin: 0;
    padding: 0;
}
div {
    width: 50%;
    max-height: 300px;
    padding: 15px;
    background: #ccc;
    border: solid 5px #fff;
    overflow-y: scroll;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
}
h1 + h1 {
    margin: 100px 0;
}

/* and some magic */
.smooth-scroll {
    -webkit-overflow-scrolling: touch;
}