Scrolling

Description

Settings for configuring the scroll behavior for a Panel.

Body can scroll 

Specify if the Body can be scrolled.

Body scroll axis 

Body scroll axis has three settings: 'Horizontal', 'Vertical', and 'Both'. When set to 'Vertical', the panel body can only be scrolled up and down (top to bottom). When set to 'Horizontal', the panel body can only be scrolled left and right. When set to 'Both', the panel body can be scrolled in all directions.

If you have built an application where swiping left or left navigates to other panels, you should set the Body scroll axis to 'Vertical'.

Body stop drag propogation 

Specify if drag events should be propagated to containing elements.

Scroll to top on focus 

If enabled, the panel body will automatically scroll to the top of the panel card when the panel receives focus.

'Pull past end' settings and events 

Specify if the user can drag the contents of the Panel Card beyond any of its boundaries. If enabled, the content will snap back to its natural position when the user releases, and 'pull' events (which you can define) are fired.

The following settings are available for configuring the 'Pull past end' behavior:

  • Vertical direction 

    Specify under what conditions the user can 'pull' (i.e. drag) the Panel Card beyond its top or bottom end point. When the user stops pulling on the Panel Card, the Panel animates back to its natural position.

    Available options are:

    Option
    Description
    auto

    Drag past end will only be allowed if there is any scrollable content in the control.

    always

    Drag past end will always be allowed.

    never

    Drag past end will never be allowed.

  • Horizontal direction 

    Specify under what conditions the user can 'pull' (i.e. drag) the Panel Card beyond its left or right end point. When the user stops pulling on the Panel Card, the Panel animates back to its natural position.

    The options available are auto, always, and never. See Vertical direction above for an explanation of each option.

  • onPull event 

    Fires repeatedly while the user is pulling on the content.

    See onPull Event for more information.

  • onPullRelease event 

    Fires when the user releases the 'pulled' content if the content is in a 'pulled past end' state.

    See onPullRelease Event for more information.

  • onPullEnd event 

    Fires when the user has 'pulled' content beyond an end point but has then restores the content to its 'non-pulled' state. Fires when the content is restored to its 'non-pulled' state. The use case for this event is to allow the user to cancel an action that would be triggered by some 'pull past end' action.

    See onPullEnd Event for more information.

Custom scroll indicator settings 

You can customize the position and appearance of the scroll indicator that is shown when the Panel Card is scrolled

Configuring a Horizontal Scroller 

The horizontal scroller lets the user scroll content along the x-axis (left to right). If the horizontal scroller is disabled (Show Horizontal scroll indicator), the horizontal scroller is not shown when the panel is scrolled horizontally.

Horizontal Scroller layout with Horizontal scroll indicator location set to 'bottom'

Disabling the horizontal scroll indicator does not disable horizontal scrolling. To disable horizontal scrolling, see the Body can scroll and Body scroll axis properties.

Options include:

Property
Description
Show Horizontal scroll indicator

Enables or disables a scroll indicator shown when the Panel is scrolled horizontally (left to right/right to left.) Enabled by default.

Horizontal indicator classname

The classname applied to the area where the scroll indicator moves.

If you are using the system Alpha web theme, the default classname for the horizontal indicator is scrollIndH.

Horizontal scroll bar classname

The classname applied to the scroll position indicator.

If you are using the system Alpha web theme, the default classname for the horizontal scroll bar is scrollIndHBar.

Horizontal scroll indicator location

The location of the horizontal scroll indicator. The indicator can be position at the 'top' or 'bottom' of the Panel card. Default is 'bottom'.

Horizontal offset

The space between the scroll indicator and the edge of the panel (either top or bottom as defined by the Horizontal scroll indicator location property.) The offset is defined using CSS units. Default is 0px.

Horizontal left offset

The space between the left edge of the scroll indicator and the left edge of the Panel. The offset is defined using CSS units. Default is 0px.

Horizontal right offset

The space between the right edge of the scroll indicator and the right edge of the Panel. The offset is defined using CSS units. Default is 0px.

Configuring a Vertical Scroller 

The vertical scroller lets the user scroll content along the y-axis (top to bottom). If the vertical scroller is disabled (Show Vertical scroll indicator), the vertical scroller is not shown when the panel is scrolled vertically.

Vertical Scroller layout with Vertical scroll indicator location set to 'right'

Disabling the vertical scroll indicator does not disable vertical scrolling. To disable vertical scrolling, see the Body can scroll and Body scroll axis properties.

Options include:

Show Vertical scroll indicator

Enables or disables a scroll indicator shown when the Panel is scrolled Vertical (top to bottom/bottom to top.) Enabled by default.

Vertical indicator classname

The classname applied to the area where the scroll indicator moves.

If you are using the system Alpha web theme, the default classname for the vertical indicator is scrollIndV.

Vertical scroll bar classname

The classname applied to the scroll position indicator.

If you are using the system Alpha web theme, the default classname for the vertical scroll bar is scrollIndVBar.

Vertical scroll indicator location

The location of the vertical scroll indicator. The indicator can be position at the 'left' or 'right' of the Panel card. Default is 'right'.

Vertical offset

The space between the scroll indicator and the edge of the panel (either left or right as defined by the Vertical scroll indicator location property.) The offset is defined using CSS units. Default is 0px.

Vertical top offset

The space between the top edge of the scroll indicator and the top edge of the Panel. The offset is defined using CSS units. Default is 0px.

Vertical bottom offset

The space between the bottom edge of the scroll indicator and the bottom edge of the Panel. The offset is defined using CSS units. Default is 0px.

See Also