Mousewheel Event

by alecazam

HTML

Scroll here with mouse wheel, check console...

CSS

body {
  padding: 50px;
  font: normal bold 10px/1.4 Times, Serif;
  color: black;
  background-color: white;
  touch-action: none;
}

JavaScript

// This test case handles pan/zoom/pinch all on the same element.  

// Wheel events are one of the worst elements of browser input handling.  Each platform/browser does things differently, and there's no attempt at dealing with many real problems like inertia, inertia transfer to the different input modes, normalizing deltaX/deltY, consistency, identifying the input type, etc.  Touch and pointer events don't help this either, since they don't address touchpad (only mouse + touch).  

// On Mac, wheel events work great and can easily identify pinch from zoom from pan.  Inertia values have a nice ramp up/down.  On Safari, gesture events can be intercepted to separate pinch from zoom, and line up with Chrome's faked wheel values.

// On Windows, you'll see numLinesToScrollXY, device pixel ratio, and browser zoom all affect the values reported incorrectly.  There's also no way to identify fake ctrl key from real ctrl key. In our app, real wheel can be inverted off a preference, but pinch should not be.
// On Windows, there is very different behavior on Chrome/Edge/Firefox on low and high-precision touchpads.  Edge, for example, can't disable the default behaviors for swipe/browser zoom on high-precision touchpads, but can on low.  Chrome doesn't yet support high-precision touchpads either.

// XPS 15 or Samsung Notebook 9 Pro both have precision touchpads.  
// Razer Stealth has regular touchpad, so testing must cover both.

// Here are various bugs and code snippets to help in see the source level problems and bugs.
// 0. My bug for Chrome.  This collects several issues on Chrome
//   https://bugs.chromium.org/p/chromium/issues/detail?id=710197

// 1. Chrome input handling for Windows/Linux/ChromOS
//   https://cs.chromium.org/chromium/src/ui/events/blink/blink_event_util.cc?type=cs&l=766
// 2. No Pinch Zoom to Ctrl+Mousewheel in Firefox Mac
//   https://bugzilla.mozilla.org/show_bug.cgi?id=1052253
// 3. ChromeOS doesn't perform pinch zoom.
//  ...