Chrome Android scrolling issue

by tabalinas

HTML

<div id="container">
    <div id="content">
        <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p> 
        <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
        </p>
    </div>
</div>

CSS

#container {
    overflow: scroll;
    border: 1px solid #gray;
    width: 100%;
    height: 300px;
}

p:nth-child(2) {
    display: none;
}

JavaScript

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1" />');

var $container = $("#container");
var startClientY;

$("#container").on({
    "touchstart": function(e) {
        startClientY = e.originalEvent.changedTouches[0].pageY;
        console.log("start: " + e.timeStamp);
    },
    
    "touchmove": function(e) {
        console.log("move: " + e.timeStamp);
        
        var clientY = e.originalEvent.changedTouches[0].pageY;
        
        if($container.scrollTop() === 0 && clientY > startClientY) {
            console.log("prevented");
            e.preventDefault();
        }
    },
    
    "touchend" : function(e) {
        console.log("end: " + e.timeStamp);
    },
    
    "touchcancel": function(e) {
        console.log("cancel: " + e.timeStamp);
    }
});