public
Last active

Detect manual- and auto-scrolling on iOs

  • Download Gist
tweets.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="http://sharedfil.es/style-objajqsQWR.css">
<title>example</title>
 
<body>
 
<p id="log"></p>
<ul id="tweets"></ul>
 
<script>
 
var acceptTap = true,
i = 301,
fragment = document.createDocumentFragment(),
log = document.getElementById("log"),
tweets = document.getElementById("tweets"),
willScroll = false,
isScrolling = false,
lastScrollPosition;
 
while (i--) {
var tweet = document.createElement("li");
tweet.appendChild(document.createTextNode("Tweet " + i));
fragment.appendChild(tweet);
}
 
tweets.appendChild(fragment);
 
tweets.addEventListener("touchstart", function(e) {
willScroll = false;
});
 
tweets.addEventListener("touchmove", function(e) {
willScroll = true;
lastScrollPosition = tweets.scrollTop;
});
 
tweets.addEventListener("touchend", function(e) {
if (willScroll) {
var offset = Math.abs(tweets.scrollTop - lastScrollPosition);
if (offset > 5) {
isScrolling = true;
}
willScroll = false;
} else if (!scrolling()) {
log.innerHTML = ("Tap on " + e.target.firstChild.nodeValue);
}
});
 
tweets.addEventListener("scroll", function(e) {
if (!willScroll) {
if (isScrolling) {
isScrolling = false;
willScroll = false;
}
}
});
 
function scrolling() {
return isScrolling || willScroll;
}
 
/*setInterval(function() {
log.innerHTML = (scrolling() ? "scrolling" : "--");
}, 10);*/
 
</script>
 
</body>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.