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
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div class="intro">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <p>This example shows how to create a basic ScrollView widget. The base ScrollView widget doesn't have a scrollbar indicator or pagination support.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div class="example newwindow">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <a href="scrollview-base-example.html" target="_blank" class="button">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai View Example in New Window
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h2>The Basic ScrollView Widget</h2>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>In this example, we'll create a basic ScrollView instance, without any additional feature plugins applied. This is the lightest version of the ScrollView widget. In later examples, we'll see how we can pull in different modules and plugins to provide additional features.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Modules Used</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>Since we only need the basic scrollview for this example, we pull in the `scrollview-base` module, the lightest version of ScrollView:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiYUI().use('scrollview-base', function(Y) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The `scrollview-base` module provides a ScrollView without any plugins applied. We'll see in the <a href="scrollview.html">Scrollview With Scroll Indicators</a> example, that the `scrollview` module provides a base ScrollView bundled with scroll indicator support.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Instantiating The ScrollView Widget</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The ScrollView provides support for scrollable content. In general this content can be anything, but most often it is in the form of a list, to be scrolled through. For this example, we'll provide the content for the scrollview in the form of a list, as shown below:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div id="scrollview-content" class="yui3-scrollview-loading">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <li>Aerosmith</li>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <li>Billy Joel</li>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <li>Bob Dylan</li>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>We add the `yui3-scrollview-loading` class as described in the <a href="../widget/index.html#hidingmarkup">Widget Progressive Enhancement</a> section, and provide a custom rule to hide this progressively enhanced content while the scrollview is being rendered:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai.yui3-js-enabled .yui3-scrollview-loading {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai visibility:hidden;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>To instantiate the ScrollView instance, we provide it with the `srcNode` attribute during construction, so it uses the markup above for it's content, as shown below. We could also add the content dynamically, however providing the markup on the page, allows users without JavaScript enabled to still see the content.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiYUI().use('scrollview-base', function(Y) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai var scrollView = new Y.ScrollView({
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai id:"scrollview",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai srcNode: '#scrollview-content',
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai height: 310,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai minDistance:10,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai minVelocity:0.3,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>For this example, since we want a vertically scrolling ScrollView widget, we also give it a height during construction. Without the height, the ScrollView widget would be as tall as it's content list, and there would be no need to scroll. We also give the ScrollView widget bounding box an id ("scrollview") which we can target in the example CSS. Finally, we constrain flicks so that only flicks along the "y" axis are picked up.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>As the last step, to see the functional ScrollView on the page, we call `scrollView.render()`.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Controlling Sensitivity</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The scroll dynamics for the ScrollView widget can be controlled by tweaking the following attributes, either during construction or after:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dt>flick</dt>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dd>Defines the minimum distance and/or minimum velocity which define a flick. It can be set to 0 to disable flick support completely.</dd>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dt>bounce</dt>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dd>Defines how quickly the velocity of the scrollview content decreases during a bounce (when the scrollview hits the edge of it's scroll limits). It can be set to 0 to disable bounce completely.</dd>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dt>deceleration</dt>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dd>Defines how quickly the velocity of the scrollview content decreases in response to a flick.</dd>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>Additional details about these parameters and a few other static properties which can be used to modify scroll dynamics are discussed in the <a href="index.html#attributes">ScrollView documentation</a>.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Modifying Layout For Small Screen Devices</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>This example also shows how you can modify the look and feel for your page/application, based on the size of the device you're delivering it to. For this example, when the maximum width of the device is 480px or less, we provide additional CSS rules which hide additional content and make the scrollview a full screen Widget, using media queries:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<link media="handheld, only screen and (max-device-width: 480px)"
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai href="{{componentAssets}}/examples-smallscreen.css"
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai rel="stylesheet">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The CSS in the above file, which is only served to devices matching the criteria in the `media` attribute, hides additional content and makes the ScrollView fill the width of the browser:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai#additional-content {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai display:none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai.yui3-scrollview {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h2>Complete Example Source</h2>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai{{>scrollview-base-source}}