| 1 | /**
|
| 2 | * Mouse wheel (and 2-finger trackpad) support on the web sucks. It is
|
| 3 | * complicated, thus this doc is long and (hopefully) detailed enough to answer
|
| 4 | * your questions.
|
| 5 | *
|
| 6 | * If you need to react to the mouse wheel in a predictable way, this code is
|
| 7 | * like your bestest friend. * hugs *
|
| 8 | *
|
| 9 | * As of today, there are 4 DOM event types you can listen to:
|
| 10 | *
|
| 11 | * 'wheel' -- Chrome(31+), FF(17+), IE(9+)
|
| 12 | * 'mousewheel' -- Chrome, IE(6+), Opera, Safari
|
| 13 | * 'MozMousePixelScroll' -- FF(3.5 only!) (2010-2013) -- don't bother!
|
| 14 | * 'DOMMouseScroll' -- FF(0.9.7+) since 2003
|
| 15 | *
|
| 16 | * So what to do? The is the best:
|
| 17 | *
|
| 18 | * normalizeWheel.getEventType();
|
| 19 | *
|
| 20 | * In your event callback, use this code to get sane interpretation of the
|
| 21 | * deltas. This code will return an object with properties:
|
| 22 | *
|
| 23 | * spinX -- normalized spin speed (use for zoom) - x plane
|
| 24 | * spinY -- " - y plane
|
| 25 | * pixelX -- normalized distance (to pixels) - x plane
|
| 26 | * pixelY -- " - y plane
|
| 27 | *
|
| 28 | * Wheel values are provided by the browser assuming you are using the wheel to
|
| 29 | * scroll a web page by a number of lines or pixels (or pages). Values can vary
|
| 30 | * significantly on different platforms and browsers, forgetting that you can
|
| 31 | * scroll at different speeds. Some devices (like trackpads) emit more events
|
| 32 | * at smaller increments with fine granularity, and some emit massive jumps with
|
| 33 | * linear speed or acceleration.
|
| 34 | *
|
| 35 | * This code does its best to normalize the deltas for you:
|
| 36 | *
|
| 37 | * - spin is trying to normalize how far the wheel was spun (or trackpad
|
| 38 | * dragged). This is super useful for zoom support where you want to
|
| 39 | * throw away the chunky scroll steps on the PC and make those equal to
|
| 40 | * the slow and smooth tiny steps on the Mac. Key data: This code tries to
|
| 41 | * resolve a single slow step on a wheel to 1.
|
| 42 | *
|
| 43 | * - pixel is normalizing the desired scroll delta in pixel units. You'll
|
| 44 | * get the crazy differences between browsers, but at least it'll be in
|
| 45 | * pixels!
|
| 46 | *
|
| 47 | * - positive value indicates scrolling DOWN/RIGHT, negative UP/LEFT. This
|
| 48 | * should translate to positive value zooming IN, negative zooming OUT.
|
| 49 | * This matches the newer 'wheel' event.
|
| 50 | *
|
| 51 | * Why are there spinX, spinY (or pixels)?
|
| 52 | *
|
| 53 | * - spinX is a 2-finger side drag on the trackpad, and a shift + wheel turn
|
| 54 | * with a mouse. It results in side-scrolling in the browser by default.
|
| 55 | *
|
| 56 | * - spinY is what you expect -- it's the classic axis of a mouse wheel.
|
| 57 | *
|
| 58 | * - I dropped spinZ/pixelZ. It is supported by the DOM 3 'wheel' event and
|
| 59 | * probably is by browsers in conjunction with fancy 3D controllers .. but
|
| 60 | * you know.
|
| 61 | *
|
| 62 | * Implementation info:
|
| 63 | *
|
| 64 | * Examples of 'wheel' event if you scroll slowly (down) by one step with an
|
| 65 | * average mouse:
|
| 66 | *
|
| 67 | * OS X + Chrome (mouse) - 4 pixel delta (wheelDelta -120)
|
| 68 | * OS X + Safari (mouse) - N/A pixel delta (wheelDelta -12)
|
| 69 | * OS X + Firefox (mouse) - 0.1 line delta (wheelDelta N/A)
|
| 70 | * Win8 + Chrome (mouse) - 100 pixel delta (wheelDelta -120)
|
| 71 | * Win8 + Firefox (mouse) - 3 line delta (wheelDelta -120)
|
| 72 | *
|
| 73 | * On the trackpad:
|
| 74 | *
|
| 75 | * OS X + Chrome (trackpad) - 2 pixel delta (wheelDelta -6)
|
| 76 | * OS X + Firefox (trackpad) - 1 pixel delta (wheelDelta N/A)
|
| 77 | *
|
| 78 | * On other/older browsers.. it's more complicated as there can be multiple and
|
| 79 | * also missing delta values.
|
| 80 | *
|
| 81 | * The 'wheel' event is more standard:
|
| 82 | *
|
| 83 | * http://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents
|
| 84 | *
|
| 85 | * The basics is that it includes a unit, deltaMode (pixels, lines, pages), and
|
| 86 | * deltaX, deltaY and deltaZ. Some browsers provide other values to maintain
|
| 87 | * backward compatibility with older events. Those other values help us
|
| 88 | * better normalize spin speed. Example of what the browsers provide:
|
| 89 | *
|
| 90 | * | event.wheelDelta | event.detail
|
| 91 | * ------------------+------------------+--------------
|
| 92 | * Safari v5/OS X | -120 | 0
|
| 93 | * Safari v5/Win7 | -120 | 0
|
| 94 | * Chrome v17/OS X | -120 | 0
|
| 95 | * Chrome v17/Win7 | -120 | 0
|
| 96 | * IE9/Win7 | -120 | undefined
|
| 97 | * Firefox v4/OS X | undefined | 1
|
| 98 | * Firefox v4/Win7 | undefined | 3
|
| 99 | */
|
| 100 | declare function normalizeWheel(
|
| 101 | event: any,
|
| 102 | ): {
|
| 103 | spinX: number;
|
| 104 | spinY: number;
|
| 105 | pixelX: number;
|
| 106 | pixelY: number;
|
| 107 | };
|
| 108 |
|
| 109 | declare namespace normalizeWheel {
|
| 110 | function getEventType(): string;
|
| 111 | }
|
| 112 |
|
| 113 | export = normalizeWheel;
|