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

<!-- example of using the YUI scrollview for mobile devices (http://developer.yahoo.com/yui/3/scrollview/)-->

<!-- First create your content. You can use a ul/ol or any content that overflows a div.  If you want to show scrollbars make sure to set the class either at the document or container level to "yui-skin-sam" -->

<div id="list-view" style="yui3-scrollview-loading" class="yui-skin-sam" >
     <div id="scrollable">
            <ul>
                <li><div>AC/DC</div></li>
                <li><div>Aerosmith</div></li>
                <li><div>Billy Joel</div></li>
                <li><div>Bob Dylan</div></li>
                <li><div>Bob Seger</div></li>
                <li><div>Bon Jovi</div></li>
                <li><div>Bruce Springsteen</div></li>
                <li><div>Creed</div></li>
                <li><div>Creedence Clearwater Revival</div></li>
                <li><div>Dave Matthews Band</div></li>
                <li><div>Def Leppard</div></li>
                <li><div>Eagles</div></li>
                <li><div>Eminem</div></li>
                <li><div>Fleetwood Mac</div></li>
                <li><div>Green Day</div></li>
                <li><div>Guns N' Roses</div></li>
                <li><div>James Taylor</div></li>
                <li><div>Jay-Z</div></li>
                <li><div>Jimi Hendrix</div></li>
                <li><div>Led Zeppelin</div></li>
                <li><div>Lynyrd Skynyrd</div></li>
                <li><div>Metallica</div></li>
                <li><div>Motley Crue</div></li>
                <li><div>Neil Diamond</div></li>
                <li><div>Nirvana</div></li>
                <li><div>Ozzy Osbourne</div></li>
                <li><div>Pearl Jam</div></li>
                <li><div>Pink Floyd</div></li>
                <li><div>Queen</div></li>
                <li><div>Rod Stewart</div></li>
                <li><div>Rush</div></li>
                <li><div>Santana</div></li>
                <li><div>Simon and Garfunkel</div></li>
                <li><div>Steve Miller Band</div></li>
                <li><div>The Beatles</div></li>
                <li><div>The Doors</div></li>
                <li><div>The Police</div></li>
                <li><div>The Rolling Stones</div></li>
                <li><div>Tom Petty</div></li>
                <li><div>U2</div></li>
                <li><div>Van Halen</div></li>
                <li><div>Willie Nelson</div></li>
                <li><div>ZZ Top</div></li>
            </ul>
        </div>
</div>

<!-- import the YUI library -->

<script type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.2.0/build/yui/yui.js"></script>

 <script type="text/javascript" charset="utf-8">
     // Now instantiate the scroller -- the call back is executed when the library is ready.
     // The callback creates a new Scrollview and sets the srcNode to the div id.
     // Set the height of the scrollview as needed.     
     YUI().use('scrollview', function(Y) {
        var scrollView = new Y.ScrollView({
            srcNode: '#scrollable',
            height: 310
        });
        // finally render the scrollView 
        scrollView.render();
     });			
</script>

<!-- now just test it -->