Improve wheel behavior

vaadin · Dec 20, 2016 · 5f37a25 · 5f37a25
1 parent 61e16b6
commit 5f37a25
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/test/scrolling-mode.html b/test/scrolling-mode.html
@@ -81,25 +81,34 @@
         expect(wheel(0, -1).defaultPrevented).to.be.false;
         expect(wheel(0, 1).defaultPrevented).to.be.true;
 
+        scroller._previousMomentum = 0;
         scrollToEnd(grid, function() {
-          expect(wheel(0, 1).defaultPrevented).to.be.false;
-          expect(wheel(0, -1).defaultPrevented).to.be.true;
-          done();
+          Polymer.Base.async(function() {
+            expect(wheel(0, 1).defaultPrevented).to.be.false;
+            expect(wheel(0, -1).defaultPrevented).to.be.true;
+            done();
+          }, 500); // Wait until wheel cancel period finishes
         }.bind(this));
-
       });
 
-
-      it('should only cancel wheel events when scrolling is possible - horizontal', function() {
+      it('should only cancel wheel events when scrolling is possible - horizontal', function(done) {
         expect(wheel(-1, 0).defaultPrevented).to.be.false;
         expect(wheel(1, 0).defaultPrevented).to.be.true;
 
         var table = scroller.$.table;
         table.scrollLeft = table.scrollWidth - table.offsetWidth;
+        scroller._previousMomentum = 0;
+        Polymer.Base.async(function() {
+          expect(wheel(1, 0).defaultPrevented).to.be.false;
+          expect(wheel(-1, 0).defaultPrevented).to.be.true;
+          done();
+        }, 500); // Wait until wheel cancel period finishes
+      });
 
-        expect(wheel(1, 0).defaultPrevented).to.be.false;
-        expect(wheel(-1, 0).defaultPrevented).to.be.true;
-
+      it('should prevent default during cancel period', function() {
+        wheel(1, 0);
+        wheel(-1, 0);
+        expect(wheel(-100, 0).defaultPrevented).to.be.true;
       });
 
     });

diff --git a/vaadin-grid-table-scroll-behavior.html b/vaadin-grid-table-scroll-behavior.html
@@ -114,6 +114,8 @@
 
     _onWheel: function(e) {
       var table = this.$.table;
+      var momentum = Math.abs(e.deltaX) + Math.abs(e.deltaY);
+
       if (
         (e.deltaY > 0 && table.scrollTop < table.scrollHeight - table.offsetHeight) ||
         (e.deltaY < 0 && table.scrollTop > 0) ||
@@ -124,7 +126,14 @@
         table.scrollTop += e.deltaY;
         table.scrollLeft += e.deltaX;
         this._scrollHandler();
+
+        this._ignoreNewWheel = this.debounce('ignore-new-wheel', function() {
+          this._ignoreNewWheel = null;
+        }, 500);
+      } else if (momentum <= this._previousMomentum || this._ignoreNewWheel) {
+        e.preventDefault();
       }
+      this._previousMomentum = momentum;
     },
 
     _adjustVirtualIndexOffset: function(delta) {