Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

ZUI RAScroll (gallery-zui-rascroll) on cdn

Last Updated: 01/31/13

+ 0 -

Zordius

YUI Contributor

See 5 more by this user.

Created: 08/16/12
Last CDN Push: 02/7/13
Build Tag: gallery-2013.02.07-15-27
Project: YUI 3
License: YUI BSD
YUI Version: 3.8.1
Free for use.

Just plug Y.zui.RAScroll into a scrollView. If user flick up or down, the
scrollView will ignore it. If you want a vertical scroll, plug Y.zui.RAscroll
with {horizontal: false} .

Now ZUI RAScroll also support browser native scroll, that means: If the horizontal
scrollView is scrolling, the vertical page scroll will be disabled, too.

Note

When Y.zui.RAScroll be plugged as horizontal mode, it will try to adjust

host height to ensure the scrollView is horizontal. Or, if Y.zui.RAScroll
be plugged as vertical mode, it will try to ensure the native browser
scroll will not happen by adjust the contentBox height. If the contents in
the scrollView changed, you may need to execute scrollview.hs.syncScroll()
to do the adjustment again.

Known Issue

gallery-2012.11.07-21-32 or older version can not cowork with YUI 3.7.0+
gallery-2013.01.30-21-00 or newer version can not cowork with YUI 3.6.0-

Code Sample

<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2013.02.07-15-27'
}).use('gallery-zui-rascroll', function(Y) {
 
    // Make the scrollView become a horizontal scroll.
    var scroll = new Y.ScrollView(...).plug(Y.zui.RAScroll);
 
    // Make another scrollView become a vertical scroll.
    var scroll2 = new Y.ScrollView(...).plug(Y.zui.RAScroll, {horizontal: false});
 
    // Update scroll size when content changed.
    var updateContent = function (C) {
        scroll.get('contentBox').set('innerHTML', C);
        scroll.zras.syncScroll();
    };
 
});