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.
In this example, we'll create a ScrollView instance, which also has a scrollbar indicator.
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:
``` // Pulls in scrollview-base and scrollview-scrollbars plugin // and plugs it in (at the class level) YUI().use('scrollview', function(Y) { ... }); ```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:
``` Y.Base.plug(Y.ScrollView, Y.Plugin.ScrollViewScrollbars); ```As with the Base ScrollView example, we provide the markup for the ScrollView content on the page, as shown below:
```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:
``` YUI().use('scrollview', function(Y) { var scrollView = new Y.ScrollView({ id: "scrollview", srcNode: '#scrollview-content', height: 310, flick: { minDistance:10, minVelocity:0.3, axis: "y" } }); scrollView.render(); }); ```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.
As the last step, to see the functional ScrollView on the page, we call `scrollView.render()`.
The only difference, compared to the Base ScrollView 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.
As discussed in the ScrollBar Plugin 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:
``` /* scrollView.scrollbars is an instance of the ScrollViewScrollbars plugin */ scrollView.scrollbars.hide(); scrollView.scrollbars.show(); scrollView.scrollbars.flash(); }); ```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.
``` var content = scrollView.get("contentBox"); content.delegate("click", function(e) { // Prevent links from navigating as part of a scroll gesture if (Math.abs(scrollView.lastScrolledAmt) > 2) { e.preventDefault(); Y.log("Link behavior suppressed.") } }, "a"); ```We also prevent default on mousedown, to prevent the native "drag link to desktop" behavior on certain browsers.
``` content.delegate("mousedown", function(e) { // Prevent default anchor drag behavior, on browsers // which let you drag anchors to the desktop e.preventDefault(); }, "a"); ```