Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
  <meta charset="utf-8">
  <title>Overscroll in Chrome</title>
  <meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<input id="preventPullToRefresh" type="checkbox">Prevent pull-to-refresh?</input>
<br>
<input id="preventOverscrollGlow" type="checkbox">Prevent overscroll glow?</input>
<br>
<input id="preventScroll" type="checkbox">Prevent scroll?</input>
<div style="height:4000px"/>
<br>
<script>
window.addEventListener('load', function() {
  var preventPullToRefreshCheckbox = document.getElementById('preventPullToRefresh');
  var preventOverscrollGlowCheckbox = document.getElementById("preventOverscrollGlow");
  var preventScrollCheckbox = document.getElementById("preventScroll");
​
  var maybePreventPullToRefresh = false;
  var lastTouchY = 0;
  var touchstartHandler = function(e) {
    if (e.touches.length != 1) return;
    lastTouchY = e.touches[0].clientY;
    // Pull-to-refresh will only trigger if the scroll begins when the
    // document's Y offset is zero.
    maybePreventPullToRefresh =
        preventPullToRefreshCheckbox.checked &&
        window.pageYOffset == 0;
  }
​
  var touchmoveHandler = function(e) {
    var touchY = e.touches[0].clientY;
    var touchYDelta = touchY - lastTouchY;
    lastTouchY = touchY;
​
    if (maybePreventPullToRefresh) {
      // To suppress pull-to-refresh it is sufficient to preventDefault the
      // first overscrolling touchmove.
      maybePreventPullToRefresh = false;
      if (touchYDelta > 0) {
        e.preventDefault();
        return;
      }
    }
​
    if (preventScrollCheckbox.checked) {
      e.preventDefault();
      return;
    }
​
    if (preventOverscrollGlowCheckbox.checked) {
      if (window.pageYOffset == 0 && touchYDelta > 0) {
        e.preventDefault();
        return;
      }
    }
  }
​
  document.addEventListener('touchstart', touchstartHandler, {passive: false });
  document.addEventListener('touchmove', touchmoveHandler, {passive: false });
});
</script>
</body>
</html>
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers