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
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div class="intro">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <p>This example shows how to create a ScrollView widget with a scrollbar indicator. It also illustrates a technique for suppressing link behavior during a scroll — a technique you may require if you have a ScrollView instance heavily populated by links, as in this example.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div class="example newwindow">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <a href="scrollview-example.html" target="_blank" class="button">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai View Example in New Window
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h2>The ScrollView Widget With A Scroll Indicator</h2>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>In this example, we'll create a ScrollView instance, which also has a scrollbar indicator.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Modules Used</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>Since we want to use the base ScrollView, along with the ScrollViewScrollbars plugin, which provides the scrollbar indicator we use the `scrollview` module, instead of the `scrollview-base` module we used for the basic ScrollView example:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai// Pulls in scrollview-base and scrollview-scrollbars plugin
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai// and plugs it in (at the class level)
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiYUI().use('scrollview', function(Y) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The `scrollview` module pulls in the basic ScrollView and also the ScrollViewScrollbars plugin. It has code which plugs the scrollbar plugin into the ScrollView base class:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiY.Base.plug(Y.ScrollView, Y.Plugin.ScrollViewScrollbars);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Instantiating The ScrollView Widget</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>As with the <a href="scrollview-base.html">Base ScrollView</a> example, we provide the markup for the ScrollView content on the page, 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>And we instantiate the ScrollView instance in the same way, providing the `srcNode` attribute during construction, so it uses the markup above for it's content:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiYUI().use('scrollview', 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>Again, for this example, since we want a vertically scrolling ScrollView widget, we also give it a height during construction and constrain flicks to the "y" axis.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>As the last step, to see the functional ScrollView on the page, we call `scrollView.render()`.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The only difference, compared to the <a href="scrollview-base.html">Base ScrollView</a> example, is that the ScrollViewScrollbars plugin has been pulled down and plugged in by the `scrollview` module code shown above, so the ScrollView now has a scroll indicator. The scroll indicator is styled with rounded corners in browsers which support CSS rounded corners natively.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Accessing The Scrollbars Plugin API</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>As discussed in the <a href="index.html#scrollbars">ScrollBar Plugin</a> documentation, the API to control scrollbars is available on the scrollview instance, through the `scrollView.scrollbars` property. The ScrollBar plugin doesn't have too complex of an api, just a few methods to hide and show the scrollbars:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai scrollView.scrollbars is an instance of the ScrollViewScrollbars plugin
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Suppressing Default Link Behavior</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>In this example, the scrolling surface is populated with links. To prevent links' default action (page navigation) from taking place after a scroll, we look at the `lastScrolledAmt` property of our ScrollView instance; on a simple click, that number will be very close to zero, whereas after scroll that number will be much higher. In this case, we're using a 2px threshold.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desaivar content = scrollView.get("contentBox");
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desaicontent.delegate("click", function(e) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Prevent links from navigating as part of a scroll gesture
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (Math.abs(scrollView.lastScrolledAmt) > 2) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai Y.log("Link behavior suppressed.")
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>We also prevent default on mousedown, to prevent the native "drag link to desktop" behavior on certain browsers.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desaicontent.delegate("mousedown", function(e) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Prevent default anchor drag behavior, on browsers
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // which let you drag anchors to the desktop
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h2>Complete Example Source</h2>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai{{>scrollview-source}}