Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
3.7.0GA ScrollView Release Notes

3.7.0 ScrollView Release Notes

Y.ScrollView overview

  • Added: axis configuration property give it a forced axis. If unspecified, ScrollView will attempt to detect which direction to scroll (based off overflow content). Valid values for this attribute are 'x', 'y', or 'xy'.

  • Added: ScrollView now supports scrolling on both axes (though not at the same time, aka: "panning") by specifying 'xy' as the axis value. Dual-axis support should remove most use-cases when nested ScrollView instances were required to achieve X+Y scroll capabilities.

  • Added: Right-to-left layout support. ScrollView detects RTL layouts by looking at the computed direction style, commonly set with dir attribute in an ancestor node (e.g. <html dir='rtl'>).

  • Added: scrollview.scrollTo() now accepts a Y.Node instance as an optional 5th argument, which represents the node to offset instead of contentBox. This is required for Y.Plugin.ScrollViewPaginator's capability to paginate on dual-axis instances. In most implementations, this additional argument can be ignored, but it does open up the door for some interesting things with custom plugins.

  • Added: ScrollView bounding boxes can now have both yui3-scrollview-horiz and yui3-scrollview-vert classes. Previously it was one or the other.

  • Updated: The JS timer that handles flick animations recieved a performance boost. Previously (3.6.0) it would do at least one scrollX or scrollY ATTR lookup every frame to get the offset position. In 3.7.0 that has been reduced to zero lookups, so you should see slightly smoother animation. Work to improve the flick performance and physics continues.

  • Updated: 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. This is useful for anyone with multiple ScrollView instances on a page, as you now have the ability to adjust per-instance animation & drag physics. Note: The static properties will remain (as @deprecated) for a few releases, and will currently map the attribute equivalent if they are present.

  • Updated: drag and flick setters to prevent multiple listeners from being assigned.

  • Fixed: The scrollEnd event now only fires once, and at the end of a scrolling sequence. Previously it could fire twice per scrolling sequence: once when dragging stopped, then again when the flick animation completed. This is a useful event to listen for to know when scrolling is complete, and is now more reliable.

  • Fixed: Mousewheel scrolls now properly update the scrollY attribute

  • Fixed: Numerous other bugs & quirks. ScrollView recieved a large refactoring/cleanup this release, so some other minor/undocumented bugs may have been resolved. So check anything you previously had issues with or workaround hacks, and if you are still experiencing the issue, let us know

Y.Plugin.ScrollViewPaginator overview

  • Updated: Having scrollTo methods on both scrollview and scrollview.pages could be confusing, especially since they require different arguments. So Paginator's scrollTo has been moved to scrollview.pages.scrollToIndex, which better reflects its purpose. Paginator's scrollTo still remains as a @deprecated method and maps to scrollToIndex. Please update your implementation code to reflect this change.

  • Updated: Support managed DOM optimization is improving. You can begin experimenting with the feature (disabled by default) by specifying _optimizeMemory: true in your Paginator configuration. This will hide any DOM node's not near the viewport, which will lessen the rendering costs. The plan is for this to be enabled by default in the future, so we'd love to continue gathering feedback as we stabilize and enhance this feature.

  • Fixed: scrollToIndex (previously scrollTo) now properly updates the index attribute.

  • Fixed: Bug where calling scrollview.pages.scrollTo() after single-mouse click in the widget may not scroll to the desired page, or may cause a lock-up of the widget.

  • Added: A private _scrollDims property. Each "page" in your paginator instance now have dimension properties (maxScrollX, maxScrollY, scrollX, scrollY) that are needed for paginated scrolling in a dualaxis instance. Mentioned here because inspecting these values can be very helpful when debugging.

Additional Notes & Upgrade Tips

  • Worth noting that ScrollView is still a beta component which is undergoing rapid development. This can lead to some instability/incompatability if you are accessing protected/private properties, or if you are making use of bleeding edge features (e.g. dual-axis).

  • Code changes inside ScrollView can affect the timing and pattern of internal calls, which can sometimes impact the appeared "physics" of the widget instance. When upgrading, please test out how your instance "feels", and tweak the scroll dynamics attributes if neccesary. frameDuration and deceleration can have a very noticable effect on how ScrollView feels.

  • ScrollView now 'snaps back' when the current scrollX or scrollY attribute values are above its maxScrollX or maxScrollY equivelent. So if you notice inability to scroll to a page due to snap back, one cause could be due to not running sv.syncUI() (to update the max values) when adding content after rendering.

  • Dual-axis support is very new and experimental. So new that we don't even have examples on yuilibrary.com to take advantage of it (soon though!). Still, if you wish to begin experimenting with it, understand it is a beta feature of a beta component. The scrollview-scrollbars plugin, for instance, can have issues properly indicating in a paginated instance the correct position on a given page (#2532751).

  • When possible, it's always best to specify the axis property to avoid auto-calculation hiccups. Here’s an example of a ScrollView configuration 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
});
  • As always, if you run into any issues or bugs, you can request assistance in the (YUI forums](http://yuilibrary.com/forum/), in #yui on Freenode IRC (my nick is dgathright), and by filing a new ticket.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment