jbpros/tweets.html

## tweets.html
<!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>
	<!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>