YUI Library Examples: ScrollView: ScrollView with Scroll Indicator

ScrollView: ScrollView with Scroll Indicator

The ScrollView Widget With A Scroll Indicator

In this example, we'll create a ScrollView instance, which also has a scrollbar indicator.

Modules Used

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) {
    ...
});
 

 
// 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);

Y.Base.plug(Y.ScrollView, Y.Plugin.ScrollViewScrollbars);

Instantiating The ScrollView Widget

As with the Base ScrollView example, we provide the markup for the ScrollView content on the page, as shown below:

<div id="scrollable" class="yui3-scrollview-loading">
    <ul>
        <li><div>AC/DC</div></li>
        <li><div>Aerosmith</div></li>
        <li><div>Billy Joel</div></li>
        <li><div>Bob Dylan</div></li>
        ...
    </ul>
</div>

<div id="scrollable" class="yui3-scrollview-loading">
    <ul>
        <li><div>AC/DC</div></li>
        <li><div>Aerosmith</div></li>
        <li><div>Billy Joel</div></li>
        <li><div>Bob Dylan</div></li>
        ...
    </ul>
</div>

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-base', function(Y) {
 
    var scrollView = new Y.ScrollView({
        srcNode: '#scrollable',
        height: 310
    });
 
    scrollView.render();
});

YUI().use('scrollview-base', function(Y) {
 
    var scrollView = new Y.ScrollView({
        srcNode: '#scrollable',
        height: 310
    });
 
    scrollView.render();
});

Again, for this example, since we want a vertically scrolling ScrollView widget, we also give it a height during construction.

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.

Accessing The Scrollbars Plugin API

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();
});

    /* 
      scrollView.scrollbars is an instance of the ScrollViewScrollbars plugin 
    */
    scrollView.scrollbars.hide();
    scrollView.scrollbars.show(); 
    scrollView.scrollbars.flash();
});