3.7.0pr2

By YUI TeamSeptember 12, 2012

ScrollView

In addition to the new features detailed in the 3.7.0PR1 blog post (support for dual-axis, forced-axis, and RTL), the PR2 release of ScrollView also introduces a refactored _flickFrame method (ca118aa). This is notable because that method is the internal JS timer scrollview-base uses for flick animations. Previously it did up to 4 get() lookups per frame, but in PR2 that has been reduced to no lookups. Because less lookups = more speed, on faster browsers (iOS5, modern desktop browsers) where those ATTR lookups were a bottleneck, you should see an even smoother animation. If you want to help test it out, compare the flick behavior in PR2 to previous versions, and let us know if you notice any quirks.

Also updated in PR2, for anyone using multiple ScrollView instances on a page, you now have the ability to adjust per-instance animation & drag physics. Some static properties have been moved to instance attributes (2e79a7d), which includes: FRAME_STEP becoming frameDuration, SNAP_DURATION to snapDuration, SNAP_EASING to snapEasing, EASING to easing, and BOUNCE_RANGE to bounceRange. Not to worry though, the static properties will remain (as deprecated) for a few releases, and will set the attribute equivalent if they are present.

Finally, back by popular demand is the lastScrollAmt property (aa1d7e5), which was missing in 3.7.0PR1. In the world of dual-axis instances, a single property to represent the previous delta without specifying an axis can be a little misleading. However, there are no technical limitations in exposing that value at the moment, and if it is removed we will follow our standard deprecation policy, which is at least 1 major release as @deprecated.

Worth noting that there were a few bugs introduced in PR1 that have been resolved, but haven't been included in PR2. They will however be included in the 3.7.0 GA release. The issues and subsequent pull requests are detailed in tickets #2532732, #2532742, and #2532739. For the first two, you should not experience them if your axis properties are set (see below), and you are not "lazy loading" content then calling syncUI.

Here's an example of a configuration object with each axis property (3) specified:

    var scrollview = new Y.ScrollView({
        srcNode:"#sv-content",
        height:300,
        width:200,
        axis:"x",
        flick: {
            minDistance: 10,
            minVelocity:0.3,
            axis:"x"
        },
        plugins: [{
            fn:Y.Plugin.ScrollViewPaginator, 
            cfg:{
                axis:"x",
                selector:">ul>li"
            }
        }],                    
        render:true
    });

Because ScrollView and its Paginator plugin now support an axis property, it's best to define that (when possible) instead of letting them try and guess what that value should be.

Happy scrolling!