Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Vertical Scroller by PVII

The Vertical Scroller by PVII is a dedicated extension designed to smoothly scroll a layer up and down. The script senses the user's Operating System and optimizes speed and frame rate. Additionally, the scrolling layer's precise height is calculated on the fly so your content always scrolls to its end.

Download the Vertical Scroller extension

Overview

While the Vertical scroller will scroll any layer on your page, it is usually best to scroll a layer that is contained within a parent layer (a nested layer). The parent layer should have a clipping rectangle defined that will act as the "viewport" for the scrolling layer.

Creating a Vertical Scroller by PVII behavior

  1. Select (click) an image or null link that will act as the trigger for the behavior.
  2. Click the plus button (+) on the Behaviors Panel.
  3. Choose Studio VII - Vertical Scroller by PVII to open the interface.
  4. Select a layer that you wish to act on.
  5. Select and set the options to define the scroller action.
  6. Click OK to apply the behavior.

Modifying an existing Vertical Scroller by PVII behavior

  1. Select the button, link or event that contains an existing Vertical Scroller behavior.
  2. Double-click the Vertical Scroller behavior in the Behavior Panel to open the user interface.
  3. Select and set the options to redefine the scroller action.
  4. Click OK to apply the revised behavior.

The Interface:

The Vertical Scroller by PVII interface allows you to set the direction and speed of the scroller as well as applying all of the scroller attributes at any time.

User Interface

Layer Name

Select the layer that you wish to scroll from this list. All of the absolutely positioned layers (<div> tags) on your page will be shown in this list and any layer may be selected. When a nested layer is selected, the movement will always be relative to that layers' parent.

Scrolling Boundaries

There are two position entries that you must make. The scroller works with these two positions to identify the top and bottom scrolling limits. When the scrolling layer hits these positions it will automatically stop. Think of them as the viewing boundary. When using the scrolling layer as a nested layer whose parent has a clipping rectangle defined, then the two positions would usually correspond to the parent layer's Top and Bottom clip values.

1.Top Starting Position

The Top Starting position should typically be the Scrolling Layer's default Top Position (as defined in the layer's style properties). The layer will not scroll beyond this position. When a nested layer is selected, the position and movement will always be relative to that layer's parent.

2. Ending Offset

This is the distance measured between the Start Position and the point where scrolling ends. When the Scrolling Layer's bottom edge hits this position it will stop moving. If this value is set to zero, the layer will scroll until its bottom edge hits the Start Position- in other words, all the content in the Scroller will disappear just above the top boundary. If, for example, the Ending Offset is set to 400, the layer will scroll until its bottom edge is 400px from the Start Position- revealing 400 pixels of its content. When a nested layer is selected, the position and movement will always be relative to that layer's parent.

Scroll Direction

Select the desired scrolling direction. The layer will scroll in that direction until the target position is reached or, until another Scroller event changes the action.

Select one of these methods:

Up

This method will start the selected layer moving down. This is usually placed on an up-pointing arrow button. The scroller will continue to move in this direction until another Scroller event is run that sets a new method (direction change) or until its top edge hits the defined Start Position

Down

This method will start the selected layer moving up. This is usually placed on a down-pointing arrow button. The scroller will continue to move in this direction until another Scroller event is run that sets a new method (direction change) or until its bottom edge hits the defined Ending Offset position.

Stop

This method is used to instantly stop the selected layer's scrolling movement. The Start Position, Ending Offset, and Scroll Speed settings are ignored when the Stop method is selected.

Reset

Select the Reset setting when you want to instantly move the scroller to its start position, or any other position. There will be no perceived movement, the layer is immediately placed at the Start Position you specify. The Ending Offset and Scroll Speed settings are ignored when the Stop method is selected.

Scroll Speed

This sets the selected layer's scrolling speed. The Scroller will automatically adjust the speed settings based on the user's Operating System, adjusting for the inherent running speed of the OS to assure that scrolling speed will be somewhat equivalent regardless of the OS.

Select one of these speeds:

Slow

Select the Slow speed when you want to allow the user to read (or view) the contents without having to stop and restart the scroller. This would be useful if you set your scroller to start automatically with a <body> onLoad event.

Medium

This is the default speed setting that appears when you open the Vertical Scroller window. Medium is usually best for most scrolling situations.

Fast

Select this speed when you are using the scroller to perform an animation. For example, use a fast scroll in place of the Reset function to produce an animated effect. This speed is not recommended for normal scrolling.

Warp

Select the Warp setting when you want to instantly move the scroller to its end or start position. There will be no movement animation, the layer will instantly move in the Direction you specify until it's starting or ending point is reached. Warp is handy if you want to have a "Go to End" control as it can be used to achieve the direct opposite of the Reset function.

Vertical Scroller | back to main listing