UIZE JavaScript Framework

MODULES Uize.Fx.Scroll

1. Introduction

The Uize.Fx.Scroll module provides easy functionality to animate the scrolling of the document.

DEVELOPERS: Ben Ilegbodu, original code contributed by Zazzle Inc.

1.1. Examples

There are no dedicated showcase example pages for the Uize.Fx.Scroll module.

SEARCH FOR EXAMPLES

Use the link below to search for example pages on the UIZE Web site that reference the Uize.Fx.Scroll module...

SEARCH

1.2. Implementation Info

The Uize.Fx.Scroll module defines the Uize.Fx.Scroll package under the Uize.Fx namespace.

1.2.1. Features Introduced in This Module

The features listed in this section have been introduced in this module.

STATIC METHODS

Uize.Fx.Scroll.scrollToNode

STATIC PROPERTIES

Uize.Fx.Scroll.moduleName | Uize.Fx.Scroll.pathToResources

1.2.2. Features Overridden in This Module

No features have been overridden in this module.

1.2.3. Features Inherited From Other Modules

This module has no inherited features.

1.2.4. Modules Directly Under This Namespace

There are no modules directly under this namespace.

1.2.5. Unit Tests

There is no dedicated unit tests module for the Uize.Fx.Scroll module.

2. Static Methods

2.1. Uize.Fx.Scroll.scrollToNode

Scrolls the window/document vertically to bring a specified target node into view at the top of the window.

SYNTAX

Uize.Fx.Scroll.scrollToNode (
  targetNodeSTRorOBJ,
  scrollParamsOBJ
);

VARIATION

Uize.Fx.Scroll.scrollToNode (targetNodeSTRorOBJ);

This method walks up the node parentage hierarchy in order to determine the closest ancestor to the target node that either is a scrollable container or is the root document that should be scrolled. In the event that the scrollable container is also not in view, the entire page is scrolled to bring that container node into view, while simultaneously scrolling the contents of the container to bring the target node into view within it.

By default it performs a smooth ease-in/ease-out scroll, but the curve function can be overridden in the scrollParamsOBJ.

2.1.1. targetNodeSTRorOBJ

The node (or string ID of the node) to which to scroll.

A "falsy" value for targetNodeSTRorOBJ will resolve to the document root.

2.1.2. scrollParamsOBJ

An object, specifying additional override params to control the scroll animation.

2.1.2.1. curveOBJ

Overrides the default ease-in/ease-out curve used for animating the scroll.

2.1.2.2. durationINT

Overrides the default duration (750) of the scroll animation in milliseconds.

2.1.2.3. fullVisibilityBOOL

Determines whether or not the targetNodeSTRorOBJ to which we are scrolling needs to be fully contained within the window in order to prevent scrolling to the top of the targetNodeSTRorOBJ. Default value is false.

A value of false means that as long as a single pixel of the targetNodeSTRorOBJ is within view, no scrolling will happen. A value of true means that unless the entire targetNodeSTRorOBJ is within view, scrolling will happen.

2.1.2.4. scrollToTopBOOL

When true, forces a scroll of the element to the top of the viewport, even if the entire element is already fully visible.

2.1.2.5. callbackFUNC

A callback function to be called once scrolling complete.

2.1.2.6. offsetINT

Specifies an optional vertical pixel offset from the top of the targetNodeSTRorOBJ.

EXAMPLE

Uize.Fx.Scroll.scrollToNode(
  'foo',
  {
    curve:Uize.Curve.easeInPow(.5),
    duration:1500,
    callback:function () { alert('finished') }
  }

IMPLEMENTATION INFO

this feature was introduced in this module

3. Static Properties

3.1. Uize.Fx.Scroll.moduleName

IMPLEMENTATION INFO

this feature was introduced in this module

3.2. Uize.Fx.Scroll.pathToResources

IMPLEMENTATION INFO

this feature was introduced in this module