Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Normalize mouse wheel deltas #3911

Merged
merged 2 commits into from
Jul 1, 2018
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 21 additions & 4 deletions lib/timeline/Core.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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));
Expand Down