ejmScrollPanel | API Reference | Mobile JS | Syncfusion

Mobile JS

#ejmScrollPanel

The Essential JavaScript Mobile ScrollPanel widget is an interactive panel for scrolling. The Scroll Panel control wraps its contents in a scrollable area as an object in a GUI where continuous text, pictures are scrolled and viewed though it does not fits into the space of a mobile or computer display.

Custom Design for HTML Scrollpanel control.

$(element).ejmScrollPanel()

Example

<!-- Unobtrusive way of rendering --> 
 <div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent"></div>

Requires

module:jQuery
module:ej.core
module:ej.unobtrusive
module:ej.mobile.core
module:ej.data
module:ej.touch
module:ej.mobile.scrollbar

Members

allowPullToRefresh `Boolean`

Specifies whether to enable the pull to refresh.

Default Value:

false

Example

<!-- Unobtrusive way of rendering --> 
    <div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-allowpulltorefresh="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                allowPullToRefresh: true
            });
        });
    </script>

bounceTime `Int`

Specifies the bouncing time when bouncing behavior is enabled.

Default Value:

450

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-bouncetime=1000></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                bounceTime: 1000
            });
        });
    </script>

cssClass `String`

Sets the root class for scrollpanel. This cssClass API helps to use custom skinning option for scrollpanel control. By defining the root class using this API, we need to include this root class in CSS.

Default Value:

””

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-cssclass="customclass"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                cssClass: "customclass"
            });
        });
    </script>

deceleration `Int`

Specifies the deceleration value.

Default Value:

null

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-rendermode="windows" data-ej-deceleration="0.00006"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                renderMode: "windows",
                deceleration: 0.00006
            });
        });
    </script>

directionLockThreshold `Int`

Specifies the value for direction lock threshold.

Default Value:

5

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-directionlockthreshold=12></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                directionLockThreshold: 12
            });
        });
    </script>

disableTouch `Boolean`

Specifies whether to disable touch.

Default Value:

false

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-disabletouch="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                disableTouch: true
            });
        });
    </script>

displacementTime `Int`

Specifies the displacement time.

Default Value:

800

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-displacementtime="1000" data-ej-enabledisplacement="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableDisplacement: true,
                displacementTime: 1000
            });
        });
    </script>

displacementValue `Int`

Specifies the displacement value.

Default Value:

94

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-displacementvalue="100" data-ej-enabledisplacement="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableDisplacement: true,
                displacementValue: 100
            });
        });
    </script>

enableBounce `Boolean`

Specifies whether to enable bouncing behavior.

Default Value:

true

NOTE

For Android platform this property is false

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enablebounce="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableBounce: true
            });
        });
    </script>

enabled `Boolean`

Specifies whether to enable or disable the control.

Default Value:

true

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enabled="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enabled: true
            });
        });
    </script>

enableFade `Boolean`

Specifies whether need to fade the scrollbars.

Default Value:

true

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enablefade="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableFade: true
            });
        });
    </script>

enableHrScroll `Boolean`

Specifies whether need to enable the horizontal scrolling.

Default Value:

false

NOTE

For windows tablet horizontal scrolling is true

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enablehrscroll=false></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableHrScroll: true
            });
        });
    </script>

enableInteraction `Boolean`

Specifies whether need to enable the interactive scrollbars.

Default Value:

true

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enableinteraction="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({ target: "maincontent", enableInteraction: true });
        });
    </script>

enableKeys `Boolean`

Specifies whether to enable keys.

Default Value:

true

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enablekeys=false></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableKeys: false
            });
        });
    </script>

enableMouseWheel `Boolean`

Specifies whether to enable mouse wheel scrolling.

Default Value:

true

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enablemousewheel=false></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableMouseWheel: false
            });
        });
    </script>

enableNativeScrolling `Boolean`

Specifies whether to enable device’s native scroll behavior.

Default Value:

false

NOTE

For Windows tablet, this property is true

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enablenativescrolling="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableNativeScrolling: true
            });
        });
    </script>

enableResize `Boolean`

Specifies whether need to resize the scrollbar.

Default Value:

false

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enableresize="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableResize: true
            });
        });
    </script>

enableShrink `Boolean`

Specifies whether need to shrink the scrollbars.

Default Value:

false

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enableshrink="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableShrink: "scale"
            });
        });
    </script>

enableTransform `Boolean`

Specifies whether to enable transform style for the control.

Default Value:

true

Example

<!-- Unobtrusive way of rendering --> 
 <div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enabletransform=false></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableTransform: false
            });
        });
    </script>

enableTransition `Boolean`

Specifies whether to enable transition effect for the control.

Default Value:

true

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enabletransition=false></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableTransition: false
            });
        });
    </script>

enableVrScroll `Boolean`

Specifies whether need to enable the vertical scrolling.

Default Value:

true

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enablevrscroll="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableVrScroll: true
            });
        });
    </script>

enableZoom `Boolean`

Specifies whether to enable zooming.

Default Value:

false

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enablezoom="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({ target: "maincontent", enableZoom: true });
        });
    </script>

eventPassthrough `Boolean`

Specifies whether to set the event pass through.

Default Value:

null

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-eventpassthrough="vertical"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                eventPassthrough: "vertical"
            });
        });
    </script>

invertWheel `Boolean`

Specifies whether to enable invert wheel.

Default Value:

false

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-invertwheel="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                invertWheel: true
            });
        });
    </script>

isRelative `Boolean`

Specifies whether to sets the scrollpanel to relative position.

Default Value:

false

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-isrelative="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                isRelative: true
            });
        });
    </script>

preventDefault `Boolean`

Specifies whether to prevent default events.

Default Value:

true

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-preventdefault=false></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                preventDefault: false
            });
        });
    </script>

pullToRefreshSettings `Object`

Specifies the pull to refresh settings.

pullToRefreshSettings.textOnPull `String`

Specifies the pull to refresh text on Pull.

Default Value:

“Pull to Refresh…”

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-pulltorefreshsettings-textonpull="Refresh..." data-ej-allowpulltorefresh="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                allowPullToRefresh: true,
                pullToRefreshSettings: {
                    textOnPull: "Refresh..."
                }
            });
        });
    </script>

pullToRefreshSettings.textOnRefresh `String`

Specifies the pull to refresh text on refresh.

Default Value:

“Refreshing…”

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-pulltorefreshsettings-textonrefresh="Updating..." data-ej-allowpulltorefresh="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                allowPullToRefresh: true,
                pullToRefreshSettings: {
                    textOnRefresh: "Updating..."
                }
            });
        });
    </script>

pullToRefreshSettings.textOnRelease `String`

Specifies the pull to refresh text on release.

Default Value:

“Release to Refresh…”

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-pulltorefreshsettings-textonrelease="Refresh..." data-ej-allowpulltorefresh="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                allowPullToRefresh: true,
                pullToRefreshSettings: {
                    textOnRelease: "Refresh..."
                }
            });
        });
    </script>

pullToRefreshSettings.thresholdDistance `Int`

Specifies the pull to refresh threshold distance.

Default Value:

75

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-pulltorefreshsettings-thresholddistance="25" data-ej-allowpulltorefresh="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                allowPullToRefresh: true,
                pullToRefreshSettings: {
                    thresholdDistance: 25
                }
            });
        });
    </script>

renderMode `Enum`

Specifies the rendering mode of the control. SeeRenderMode

Default Value:

auto

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-rendermode="auto"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                renderMode: ej.mobile.RenderMode.Auto
            });
        });
    </script>

scrollEndThresholdDistance `Int`

Specifies the value for scroll end threshold distance.

Default Value:

5

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-scrollendthresholddistance="5"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                scrollEndThresholdDistance: 5
            });
        });
    </script>

scrollHeight `Int`

Specifies the scroll height of the content.

Default Value:

“auto”

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-scrollheight="300"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                scrollHeight: 300
            });
        });
    </script>

scrollWidth `Int`

Specifies the scroll width of the content.

Default Value:

“auto”

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-scrollwidth="200"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                scrollWidth: "200"
            });
        });
    </script>

showScrollbars `Boolean`

Specifies whether need to show the scroll bars.

Default Value:

true

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-showscrollbars="true"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                showScrollbars: true
            });
        });
    </script>

startX `Int`

Specifies the x position on initialize.

Default Value:

0

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-startx=0></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                startX: 0
            });
        });
    </script>

startY `Int`

Specifies the y position on initialize.

Default Value:

0

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-starty=30></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({ target: "maincontent", startY: 0 });
        });
    </script>

startZoom `Int`

Specifies the initial zooming value.

Default Value:

1

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enablezoom="true" data-ej-startzoom=2></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                enableZoom: true,
                startZoom: 2
            });
        });
    </script>

targetHeight `Int`

Specifies the target element height.

Default Value:

null

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-targetheight="300"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                targetHeight: 300
            });
        });
    </script>

target `String`

Specifies the target element.

Default Value:

null

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent"
            });
        });
    </script>

targetWidth `Int`

Specifies the target element width.

Default Value:

null

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-targetwidth="200"></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                targetWidth: 200
            });
        });
    </script>

wheelSpeed `Int`

Specifies the wheel speed.

Default Value:

16

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-wheelspeed=20></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                wheelSpeed: 20
            });
        });
    </script>

zoomMax `Int`

Specifies the maximum zoom value.

Default Value:

6

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-zoom="true" data-ej-zoommax=6></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                zoom: true,
                zoomMax: 6
            });
        });
    </script>

zoomMin `Int`

Specifies the minimum zoom value.

Default Value:

1

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-zoom="true" data-ej-zoommin=2></div>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel({
                target: "maincontent",
                zoom: true,
                zoomMin: 2
            });
        });
    </script>

Methods

disable()

To disable the scrollpanel.

Example

<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent"></div>
    <script>
        // Disable the scroll panel
        $(function () {
            $("#scrollpanel").ejmScrollPanel('disable');
        });
    </script>

enable()

To enable the scrollpanel.

Example

<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent"></div>
    <script>
        // Enable the scroll panel
        $(function () {
            $("#scrollpanel").ejmScrollPanel('enable');
        });
    </script>

getComputedPosition()

To get the computed position.

Example

<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel('getComputedPosition');
        });
    </script>

getScrollPosition()

To get the scroll position.

Example

<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel('getScrollPosition');
        });
    </script>

refresh()

To refresh the scrollpanel.

Example

<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent"></div>
    <script>
        // Refresh the scroll panel
        $(function () {
            $("#scrollpanel").ejmScrollPanel('refresh');
        });
    </script>

scrollBy()

To make the content scroll with time and easing given.

Example

<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent"></div>
    <script>
        $(function () {
            var scroll = $("#scrollpanel").data("ejmScrollPanel");
            $("#maincontent").click(function () {
                scroll.scrollBy(100, 1000, 5, 10);
            });
        });
    </script>

scrollTo()

To make the content scroll to the position given.

Example

<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent"></div>
    <script>
        $(function () {
            var scroll = $("#scrollpanel").data("ejmScrollPanel");
            $("#maincontent").click(function () {
                scroll.scrollTo(10, 10);
            });
        });
    </script>

stop()

To stop the scrolling.

Example

<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent"></div>
    <script>
        $(function () {
            $("#scrollpanel").ejmScrollPanel('stop');
        });
    </script>

zoom()

To zoom the scroll content.

Example

<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent"></div>
    <script>
        // Refresh the scroll panel
        $(function () {
            var scroll = $("#scrollpanel").data("ejmScrollPanel");
            $("#maincontent").click(function () {
                scroll.zoom(10, 1, 1, 1);
            });
        });
    </script>

Events

pull

Event triggers when pull is happened in the control.

Name

Type

Description

argument

Object

Event parameters from scrollpanel.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-allowpulltorefresh="true" data-ej-pull="pull"></div>
    <script>
        // pull event for scrollpanel
        function pull(args) { //handle the event
        }
    </script>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        // pull event for scrollpanel
        $("#scrollpanel").ejmScrollPanel({
            target: "maincontent",
            allowPullToRefresh: true,
            pull: function (args) { //handle the event
            }
        });
    </script>

scroll

Event triggers when scroll happens on the control.

Name

Type

Description

argument

Object

Event parameters from scrollpanel.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
x	int	Returns the x position.
y	int	Returns the y position.

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-scroll="scroll"></div>
    <script>
        // scroll event for scrollpanel
        function scroll(args) { //handle the event
        }
    </script>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        // scroll event for scrollpanel
        $("#scrollpanel").ejmScrollPanel({
            target: "maincontent",
            scroll: function (args) { //handle the event
            }
        });
    </script>

scrollEnd

Event triggers when scroll end happens on the control.

Name

Type

Description

argument

Object

Event parameters from scrollpanel.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
x	int	Returns the x position.
y	int	Returns the y position.

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-scrollend="scrollEnd"></div>
    <script>
        // scrollEnd event for scrollpanel
        function scrollEnd(args) { //handle the event
        }
    </script>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        // scrollEnd event for scrollpanel
        $("#scrollpanel").ejmScrollPanel({
            target: "maincontent",
            scrollEnd: function (args) { //handle the event
            }
        });
    </script>

scrollStart

Event triggers when scroll start happens on the control.

Name

Type

Description

argument

Object

Event parameters from scrollpanel.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
x	int	Returns the x position.
y	int	Returns the y position.

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-scrollstart="scrollStart"></div>
    <script>
        // scrollStart event for scrollpanel
        function scrollStart(args) { //handle the event
        }
    </script>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        // scrollStart event for scrollpanel
        $("#scrollpanel").ejmScrollPanel({
            target: "maincontent",
            scrollStart: function (args) { //handle the event
            }
        });
    </script>

scrollStop

Event triggers when scroll stop happens on the control.

Name

Type

Description

argument

Object

Event parameters from scrollpanel.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
x	int	Returns the x position.
y	int	Returns the y position.

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-scrollstop="scrollStop"></div>
    <script>
        // scrollStop event for scrollpanel
        function scrollStop(args) { //handle the event
        }
    </script>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        // scrollStop event for scrollpanel
        $("#scrollpanel").ejmScrollPanel({
            target: "maincontent",
            scrollStop: function (args) { //handle the event
            }
        });
    </script>

zoomEnd

Event triggers when zoom end happens on the control.

Name

Type

Description

argument

Object

Event parameters from scrollpanel.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
x	int	Returns the x position.
y	int	Returns the y position.

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-enablezoom="true" data-ej-zoomend="zoomEnd"></div>
    <script>
        // zoomEnd event for scrollpanel
        function zoomEnd(args) { //handle the event
        }
    </script>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        // zoomEnd event for scrollpanel
        $("#scrollpanel").ejmScrollPanel({
            target: "maincontent",
            zoomEnd: function (args) { //handle the event
            }
        });
    </script>

zoomStart

Event triggers when zoom start happens on the control.

Name

Type

Description

argument

Object

Event parameters from scrollpanel.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
x	int	Returns the x position.
y	int	Returns the y position.

Example

<!-- Unobtrusive way of rendering --> 
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent" data-ej-zoomstart="zoomStart"></div>
    <script>
        // zoomStart event for scrollpanel
        function zoomStart(args) { //handle the event
        }
    </script>

<!-- Obtrusive way of rendering -->
<div id="maincontent">
        <div>
            Scroll content here
        </div>
    </div>
    <div id="scrollpanel"></div>
    <script>
        // zoomStart event for scrollpanel
        $("#scrollpanel").ejmScrollPanel({
            target: "maincontent",
            zoomStart: function (args) { //handle the event
            }
        });
    </script>