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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
#scrollableParent {
background:#ccc;
}
</style>
</head>
<body class="yui3-skin-sam">
<h1>Header</h1>
<div id="scrollableParent">
<div id="scrollable">
<ul>
<li>Aerosmith</li>
<li>Billy Joel</li>
<li>Bob Dylan</li>
<li>Bob Seger</li>
<li>Bon Jovi</li>
<li>Bruce Springsteen</li>
<li>Creed</li>
<li>Creedence Clearwater Revival</li>
<li>Dave Matthews Band</li>
<li>Def Leppard</li>
<li>Eagles</li>
<li>Eminem</li>
<li>Fleetwood Mac</li>
<li>Green Day</li>
<li>Guns N' Roses</li>
<li>James Taylor</li>
<li>Jay-Z</li>
<li>Jimi Hendrix</li>
<li>Led Zeppelin</li>
<li>Lynyrd Skynyrd</li>
<li>Metallica</li>
<li>Motley Crue</li>
<li>Neil Diamond</li>
<li>Nirvana</li>
<li>Ozzy Osbourne</li>
<li>Pearl Jam</li>
<li>Pink Floyd</li>
<li>Queen</li>
<li>Rod Stewart</li>
<li>Rush</li>
<li>Santana</li>
<li>Simon and Garfunkel</li>
<li>Steve Miller Band</li>
<li>The Beatles</li>
<li>The Doors</li>
<li>The Police</li>
<li>The Rolling Stones</li>
<li>Tom Petty</li>
<li>U2</li>
<li>Van Halen</li>
<li>Willie Nelson</li>
<li>ZZ Top</li>
</ul>
</div>
</div>
<h2>Footer</h2>
<script type="text/javascript">
YUI.add('scrollview-mousewheel', function(Y){
function MouseWheelPlugin(config) {
MouseWheelPlugin.superclass.constructor.apply(this, arguments);
}
MouseWheelPlugin.NAME = 'pluginScrollViewMouseWheel';
MouseWheelPlugin.NS = 'mousewheel';
}
Y.extend(MouseWheelPlugin, Y.Plugin.Base, {
initializer: function() {
this.afterHostEvent('render', this._afterRender);
},
_afterRender: function() {
var host = this.host;
var contentBox = host.get("contentBox");
var lineHeight = contentBox.one("ul li").getComputedStyle('height'); // This probably shouldn't assume `ul li`
var lineHeightInt = parseInt(lineHeight, 10);
contentBox.on("mousewheel", function(e) {
var preventDefault = true;
var scrollY = host.get('scrollY');
var scroll_to = scrollY - (e.wheelDelta * lineHeightInt);
host.scrollTo(0, scroll_to);
// if we have scrollbars plugin, flash the scrollbar
if (host.scrollbars) {
}
// prevent browser default behavior on mouse scroll
if (preventDefault) {
}
});
}
});
Y.Base.plug(Y.ScrollView, MouseWheelPlugin);
});
YUI({
filter:"raw",
modules:{
'scrollview-mousewheel' : {
requires: ['event-mousewheel']
}
}
}).use('event-mousewheel', 'scrollview', 'cssreset', 'cssfonts', function(Y) {
var scrollView = new Y.ScrollView({
id: "scrollview",
srcNode: Y.one("#scrollable"),
height: 200,
mousewheel: true,
flick: {
minDistance:10,
minVelocity:0.3,
axis: "y"
}
}).render();
scrollView.get("contentBox").on('mouseover', function(e){
console.log(e);
});
});
</script>
</body>
</html>