1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
/*
usage:
base.wheel = new wheel({
el: document.querySelector("#map"),
update: function(e, val, delta){
// do something with val
},
})
*/
function wheel (opt) {
opt = defaults(opt, {
el: document,
fn: function(e, val, delta){},
propagate: false,
locked: false,
reversible: true,
ratio: 0.02,
val: 0,
})
opt.el.addEventListener('wheel', onMouseWheel, false);
// opt.el.addEventListener('mousewheel', onMouseWheel, false);
opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false);
function onMouseWheel (e) {
if (opt.locked) {
return
}
if (! opt.propagate) {
e.stopPropagation()
e.preventDefault()
}
var deltaX = 0, deltaY = 0;
// WebKit
if ( event.deltaY ) {
deltaY -= event.deltaY * opt.ratio
deltaX -= event.deltaX * opt.ratio
}
else if ( event.wheelDeltaY ) {
deltaY -= event.wheelDeltaY * opt.ratio
deltaX -= event.wheelDeltaX * opt.ratio
}
// Opera / Explorer 9
else if ( event.wheelDelta ) {
deltaY -= event.wheelDelta * opt.ratio
}
// Firefox
else if ( event.detail ) {
deltaY += event.detail * 2
}
if (! opt.reversible && (deltaY < 0 && deltaX < 0)) return;
// opt.val = clamp(opt.val + delta, opt.min, opt.max)
opt.update(e, deltaY, deltaX)
}
opt.lock = function(){ opt.locked = true }
opt.unlock = function(){ opt.locked = false }
return opt
}
|
