Moobile.ScrollView

https://moobilejs.com/wp-content/themes/anemos/images/empty/thumbnail.jpg 150 150 ThomasEngels ThomasEngels https://secure.gravatar.com/avatar/e2d9cbb296a470c2da9e85420f51232e?s=96&d=mm&r=g January 9, 2019 January 27, 2020

Extends Moobile.View

Provides support for displaying content that is larger than the view size.

Initialization

Syntax:

var scrollView = new Moobile.ScrollView([element], [options], [name]);

Parameters:

Name	Type	Description
`element` Optional	Element	The view’s element, element id or html string.
`options` Optional	Object	The view’s options, see below.
`name` Optional	String	The view’s name.

Options:

Name	Type	Description
`className`	String	The view’s extended CSS class name, defaults to `null`.
`styleName`	String	The view’s default style, defaults to `null`.
`scroller`	Mixed	The view’s scrolling engine, either `IScroll` or `Native`, defaults to the `Native` when available otherwise `IScroll`.
`scroll`	String	The view’s scrolling directions, either `vertical`, `horizontal` or `both`, defaults to `vertical`. This options is only available using the `IScroll` engine.
`scrollbar`	String	The view’s scrollbars to display, either `vertical`, `horizontal` or `both`, defaults to `vertical`. This options is only available using the `IScroll` engine.
`momentum`	Boolean	Whether the view scrolls with momentum, defaults to `true`.
`snapToPage`	Boolean	Whether to snap to the current page upon release, defaults to `false`.
`snapToPageAt`	Number	The percentage moved to snap to the next page, defaults to `20`.
`snapToPageSizeX`	Number	The width of a page, defaults to `null` which calculate the page’s width automatically.
`snapToPageSizeY`	Number	The height of a page, defaults to `null` which calculate the page’s height automatically.
`snapToPageDuration`	Number	The time in milliseconds for the snap animation, defaults to `150`.
`snapToPageDelay`	Number	The view will automatically snap to the next page if the user scrolls for less than this time in milliseconds, defaults to `150`.
`initialPageX`	Number	The initial horizontal page to scroll to, defaults to `0`.
`initialPageY`	Number	The initial vertical page to scroll to, defaults to `0`.
`initialScrollX`	Number	The initial horizontal scroll, defaults to `0`.
`initialScrollY`	Number	The initial vertical scroll, defaults to `0`.

Generates:

<div class="view scroll-view view-layout-vertical (iscroll|native)-engine">
    <div class="view-content-wrapper scrollable">
        <div data-role="content" class="view-content scroll-view-content"></div>
    </div>
</div>

Defined roles:

Name	Description
`view`	Defines an element acting as a view. Use the `data-view` attribute to specify a subclass instead
`content`	Defines an element acting as a view’s content. If omitted, the contents of the view’s element will act as its view content.

Note:

Upon initialization, this view will use the CSS class name either provided as either an option or directly in the element to generate the view content’s class name. The view content CSS class name will be made from the view’s CSS class appended with content.

Events

scrollstart

Fired when the user starts scrolling with a touch event. This event is only fired with the IScroll engine.

scrollend

Fired when the users finishes the touch event. This event is only fired with the IScroll engine.

scroll

Fired when the content is being scrolled. However, this event is not called when the scrolling occurs from its own momentum. In this case the event will still be called once the momentum stops.

Methods

setContentSize(x, y)

Sets this view’s content size including the scrollable area.

Parameters:

Name	Type	Description
`x`	Number	This view content’s width.
`y`	Number	This view content’s height.

Returns:

Moobile.ScrollView This Moobile.ScrollView instance.

getContentSize()

Returns this view’s content size including the scrollable area.

Returns:

Object An object containing the x and y dimensions of this view’s content including the scrollable area.

getContentWrapperSize()

Returns this view’s content size excluding the scrollable area.

Returns:

Object An object containing the x and y dimensions of this view’s content excluding the scrollable area.

getContentScroll()

Returns this view’s scroll position.

Returns:

Object An object containing the x and y scroll positions.

scrollTo(x, y, time)

Scrolls to a set of coordinate.

Parameters:

Name	Type	Description
`x`	Number	The x coordinate.
`y`	Number	The y coordinate.
`time` Optional	Number	The duration of the scroll.

Returns:

Moobile.ScrollView This Moobile.ScrollView instance.

scrollToElement(element, time)

Scrolls to an element.

Parameters:

Name	Type	Description
`element`	Element	The element to scroll to.
`time` Optional	Number	The duration of the scroll.

Returns:

Moobile.ScrollView This Moobile.ScrollView instance.

scrollToPage(pageX, pageY, time)

Scrolls to page.

Parameters:

Name	Type	Description
`pageX`	Number	The horizontal page number.
`pageY`	Number	The vertical page number.
`time` Optional	Number	The duration of the scroll.

Returns:

Moobile.ScrollView This Moobile.ScrollView instance.

getPage()

Return this view’s current page. The current page based on the page visible at the top left area of this view’s content.

Returns:

Object An object containing the x and y pages.