fix(wheel): fixes issue with shiftKey + mouse wheel not treated as horizontal scroll in normalizeWheel (certain platforms) (#48)

chore: npx browserslist@latest --update-db

Co-authored-by: Trond Pettersen <Trond.Pettersen@blackline.com>

Author: trondpet

package-lock.json

@@ -2,6 +2,15 @@ import emptyFunction from './utils/emptyFunction';
 import normalizeWheel from './utils/normalizeWheel';
 import requestAnimationFramePolyfill from './requestAnimationFramePolyfill';
 
+const swapWheelAxis = normalizedEvent => {
+  return {
+    spinX: normalizedEvent.spinY,
+    spinY: normalizedEvent.spinX,
+    pixelX: normalizedEvent.pixelY,
+    pixelY: normalizedEvent.pixelX
+  };
+};
+
 class WheelHandler {
   animationFrameID = null;
   deltaX = 0;
@@ -40,7 +49,13 @@ class WheelHandler {
   }
 
   onWheel(event) {
-    const normalizedEvent = normalizeWheel(event);
+    let normalizedEvent = normalizeWheel(event);
+
+    // on some platforms (e.g. Win10), browsers do not automatically swap deltas for horizontal scroll
+    if (navigator.platform !== 'MacIntel' && event.shiftKey) {
+      normalizedEvent = swapWheelAxis(normalizedEvent);
+    }
+
     const deltaX = this.deltaX + normalizedEvent.pixelX;
     const deltaY = this.deltaY + normalizedEvent.pixelY;
     const handleScrollX = this.handleScrollX(deltaX, deltaY);

src/WheelHandler.ts

@@ -0,0 +1,141 @@
+import { WheelHandler } from '../src';
+
+describe('WheelHandler', () => {
+  let mockEvent;
+  let originalNavigator = global.navigator;
+
+  beforeEach(() => {
+    mockEvent = {
+      preventDefault: () => {},
+      deltaX: 10,
+      deltaY: 0
+    };
+
+    Object.defineProperty(global, 'navigator', {
+      value: {
+        platform: 'MacIntel'
+      }
+    });
+  });
+
+  after(() => {
+    Object.defineProperty(global, 'navigator', {
+      value: originalNavigator
+    });
+  });
+
+  it('Should return deltaX and deltaY', done => {
+    const wheelHandler = new WheelHandler(
+      (dX, dY) => {
+        expect(dX).to.equal(10);
+        expect(dY).to.equal(0);
+        done();
+      },
+      true,
+      true
+    );
+    wheelHandler.onWheel(mockEvent);
+  });
+
+  it('Should normalize deltas correctly when delta unit is lines', done => {
+    const wheelHandler = new WheelHandler(
+      (dX, dY) => {
+        expect(dX).to.equal(8000);
+        expect(dY).to.equal(800);
+        done();
+      },
+      true,
+      true
+    );
+    wheelHandler.onWheel({
+      ...mockEvent,
+      deltaMode: 2,
+      deltaX: 10,
+      deltaY: 1
+    });
+  });
+
+  it('Should normalize deltas when delta unit is pages', done => {
+    const wheelHandler = new WheelHandler(
+      (dX, dY) => {
+        expect(dX).to.equal(400);
+        expect(dY).to.equal(40);
+        done();
+      },
+      true,
+      true
+    );
+    wheelHandler.onWheel({
+      ...mockEvent,
+      deltaMode: 1,
+      deltaX: 10,
+      deltaY: 1
+    });
+  });
+
+  it('Should take horizontal scrolling with shiftKey + wheel into account on non-MacIntel platforms', done => {
+    Object.defineProperty(global, 'navigator', {
+      value: {
+        platform: 'Win64'
+      }
+    });
+
+    const wheelHandler = new WheelHandler(
+      (dX, dY) => {
+        expect(dX).to.equal(10);
+        expect(dY).to.equal(0);
+        done();
+      },
+      true,
+      true
+    );
+    wheelHandler.onWheel({
+      ...mockEvent,
+      shiftKey: true,
+      deltaX: 0,
+      deltaY: 10
+    });
+  });
+
+  it('Should not treat as horizontal scrolling when event.shiftKey == true if platform is MacIntel', done => {
+    Object.defineProperty(global, 'navigator', {
+      value: {
+        platform: 'MacIntel'
+      }
+    });
+
+    const wheelHandler = new WheelHandler(
+      (dX, dY) => {
+        expect(dX).to.equal(0);
+        expect(dY).to.equal(10);
+        done();
+      },
+      true,
+      true
+    );
+    wheelHandler.onWheel({
+      ...mockEvent,
+      shiftKey: true,
+      deltaX: 0,
+      deltaY: 10
+    });
+  });
+
+  it('Should treat as horizontal scrolling when side scrolling on FF', done => {
+    const wheelHandler = new WheelHandler(
+      (dX, dY) => {
+        expect(dX).to.equal(500);
+        expect(dY).to.equal(0);
+        done();
+      },
+      true,
+      true
+    );
+    wheelHandler.onWheel({
+      detail: 50,
+      axis: 1,
+      HORIZONTAL_AXIS: 1,
+      preventDefault: () => {}
+    });
+  });
+});