diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index dcb0476d..fa843cef 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -176,6 +176,11 @@ Core.prototype._create = function (container) { * @param {WheelEvent} event */ function onMouseWheel(event) { + + // Reasonable default wheel deltas + const LINE_HEIGHT = 40; + const PAGE_HEIGHT = 800; + if (this.isActive()) { this.emit('mousewheel', event); } @@ -204,6 +209,17 @@ Core.prototype._create = function (container) { deltaX = event.deltaX; } + // Normalize deltas + if (event.deltaMode) { + if (event.deltaMode === 1) { // delta in LINE units + deltaX *= LINE_HEIGHT; + deltaY *= LINE_HEIGHT; + } else { // delta in PAGE units + deltaX *= LINE_HEIGHT; + deltaY *= PAGE_HEIGHT; + } + } + // Prevent scrolling when zooming (no zoom key, or pressing zoom key) if (!this.options.zoomKey || event[this.options.zoomKey]) return; @@ -241,11 +257,12 @@ Core.prototype._create = function (container) { } } + // Add modern wheel event listener if (this.dom.centerContainer.addEventListener) { - // IE9, Chrome, Safari, Opera - this.dom.centerContainer.addEventListener("mousewheel", onMouseWheel.bind(this), false); - // Firefox - this.dom.centerContainer.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false); + const wheel = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel" + document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel" + "DOMMouseScroll"; // Older Firefox versions like "DOMMouseScroll" + this.dom.centerContainer.addEventListener(wheel, onMouseWheel.bind(this), false); } else { // IE 6/7/8 this.dom.centerContainer.attachEvent("onmousewheel", onMouseWheel.bind(this));