#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

  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- Unobtrusive way of rendering --> 
    <div id="maincontent">
            <div>
                Scroll content here
            </div>
        </div>
        <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="maincontent"></div>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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

  • html
  • <!-- 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>
  • html
  • <!-- 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>