* Avoid the work of syncing position if touch starts after animation …

…has completed

* Clean up event listener hookups

scrollability.js

@@ -34,7 +34,7 @@ var kStoppedThreshold = 4;
 var kLockThreshold = 10;
 
 // Percentage of the page which content can be overscrolled before it must bounce back
-var kBounceLimit = 0.5;
+var kBounceLimit = 0.75;
 
 // Rate of deceleration when content has overscrolled and is slowing down before bouncing back
 var kBounceDecelRate = 0.01;
@@ -89,25 +89,29 @@ function onLoad() {
     exports.flashIndicators();
 }
 
-function onTouchStart(event) {
-    var touch = isTouch ? event.touches[0] : event;
-    // var touched = null;
-
-    touchX = startX = touch.clientX;
-    touchY = startY = touch.clientY;
-    touchMoved = false;
-
-    touchAnimators = getTouchAnimators(event.target, touchX, touchY, event.timeStamp);
-    if (!touchAnimators.length) {
-        return true;
-    }
-
+require.ready(function() {
     var d = document;
+    d.addEventListener(isTouch ? 'touchstart' : 'mousedown', onTouchStart, false);
     d.addEventListener(isTouch ? 'touchmove' : 'mousemove', onTouchMove, false);
     d.addEventListener(isTouch ? 'touchend' : 'mouseup', onTouchEnd, false);
+    // window.addEventListener('load', onLoad, false);
 
-    // if (D) event.preventDefault();
-
+    function onTouchStart(event) {
+        var touch = isTouch ? event.touches[0] : event;
+        // var touched = null;
+
+        touchX = startX = touch.clientX;
+        touchY = startY = touch.clientY;
+        touchMoved = false;
+
+        touchAnimators = getTouchAnimators(event.target, touchX, touchY, event.timeStamp);
+        if (!touchAnimators.length) {
+            return true;
+        }
+
+        // if (D) event.preventDefault();
+    }
+
     function onTouchMove(event) {
         event.preventDefault();
         touchMoved = true;
@@ -148,12 +152,9 @@ function onTouchStart(event) {
         //     releaseTouched(touched);
         // }
 
-        d.removeEventListener(isTouch ? 'touchmove' : 'mousemove', onTouchMove, false);
-        d.removeEventListener(isTouch ? 'touchend' : 'mouseup', onTouchEnd, false);
-
         touchAnimation(event.timeStamp);
     }
-}
+});
 
 function wrapAnimator(animator, startX, startY, startTime) {
     var node = animator.node;
@@ -188,14 +189,16 @@ function wrapAnimator(animator, startX, startY, startTime) {
     }
 
     // XXXjoe This stuff only needs to be done if animation was running when touch began
-    play(node);
-    if (scrollbar) {
-        play(scrollbar);
-    }
     if (node.dirtyEnding) {
+        play(node);
+        if (scrollbar) {
+            play(scrollbar);
+        }
+
         node.dirtyEnding();
+
+        reposition(position);
     }
-    reposition(position);
 
     if (!animator.mute) {
         if (!dispatch("scrollability-start", node)) {
@@ -233,10 +236,10 @@ function wrapAnimator(animator, startX, startY, startTime) {
         if (constrained) {
             if (position > max && absMax == max) {
                 var excess = position - max;
-                velocity *= (1.0 - excess / bounceLimit);
+                velocity *= (1.0 - excess / bounceLimit)*kBounceLimit;
             } else if (position < min && absMin == min) {
                 var excess = min - position;
-                velocity *= (1.0 - excess / bounceLimit);
+                velocity *= (1.0 - excess / bounceLimit)*kBounceLimit;
             }
         }
 
@@ -718,8 +721,3 @@ function dispatch(name, target, props) {
 
     return target.dispatchEvent(e);
 }
-
-require.ready(function() {
-    document.addEventListener(isTouch ? 'touchstart' : 'mousedown', onTouchStart, false);
-    // window.addEventListener('load', onLoad, false);
-});

static/examples/tableview.html

@@ -18,7 +18,7 @@
 #container {
     position: absolute;
     left: 0;
-    top: 24px;
+    top: 44px;
     bottom: 24px;
     width: 100%;
     background: #fff;
@@ -51,11 +51,15 @@
     font-size: 10px;
     font-weight: bold;
     text-align: center;
+    -webkit-box-sizing: border-box;
 }
 
 .bar.top {
     top: 0;
+    height: 44px;
     border-bottom: 1px solid #000;
+    padding: 10px;
+    font-size: 22px;
 }
 
 .bar.bottom {
@@ -148,15 +152,15 @@
 
 document.addEventListener('touchstart', function(event) {
     // Prevent text selection
-    event.preventDefault();
+    // event.preventDefault();
 }, false);
 
 </script>
 
 </head>
 <body>
     <div class="bar top" onclick="location.reload(true)">Scrollability Demo</div>
-    <div class="bar bottom" onclick="showLog()">Footer</div>
+    <div class="bar bottom" onclick="if (window.showLog) showLog()">Footer</div>
     <div id="container">
         <div id="page" class="scrollable vertical"></div>
     </div>