fix: only bind passive events when supported

src/panelSnap.js

@@ -5,6 +5,7 @@ import {
   getTargetScrollTop,
   getElementsInContainerViewport,
   elementFillsContainer,
+  passiveIsSupported,
 } from './utilities';
 
 let INSTANCE_COUNTER = 0;
@@ -49,7 +50,7 @@ export default class PanelSnap {
 
     this.container.addEventListener('mouseup', this.onMouseUp.bind(this));
     this.container.addEventListener('mousedown', this.onMouseDown.bind(this));
-    this.scrollContainer.addEventListener('wheel', this.onWheel.bind(this), { passive: true });
+    this.scrollContainer.addEventListener('wheel', this.onWheel.bind(this), passiveIsSupported && { passive: true });
   }
 
   on(name, handler) {

src/utilities.js

@@ -60,3 +60,24 @@ export function elementFillsContainer(container, element) {
     elementRect.right >= containerRect.right
   );
 }
+
+// Taken from MDN
+// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
+export const passiveIsSupported = (function () {
+  let isSupported = false;
+
+  try {
+    const options = Object.defineProperty({}, 'passive', {
+      get() { // eslint-disable-line getter-return
+        isSupported = true;
+      },
+    });
+
+    window.addEventListener('test', null, options);
+    window.removeEventListener('test', null, options);
+  } catch (e) {
+    // Do nothing
+  }
+
+  return isSupported;
+}());

src/utilities.test.js

@@ -3,6 +3,7 @@ import {
   getTargetScrollTop,
   getElementsInContainerViewport,
   elementFillsContainer,
+  passiveIsSupported,
 } from './utilities';
 
 const SCREEN_WIDTH = 800;
@@ -229,3 +230,9 @@ describe('elementFillsContainer', () => {
     expect(elementFillsContainer(container, getElement(99, 499))).toBe(false);
   });
 });
+
+describe('isPassiveSupported', () => {
+  test('returns false in JSDOM', () => {
+    expect(passiveIsSupported).toBe(false);
+  });
+});