ejScroller

11 Jul 201824 minutes to read

The Scroller control has a sliding document whose position corresponds to a value. The document has text, HTML content or images. You can also customize the Scroller control by resizing the scrolling bar and changing the theme.

Syntax

  • JAVASCRIPT
    • $(element).ejScroller()

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;">
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller</b>  can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
         It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul>
</div>     
</div> 
 
<script>
// Create Scroller
$('#scrollContent').ejScroller();       
</script>

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.draggable.js

    • module:ej.touch.js

    • module:ej.scroller.js

    Members

    animationSpeed number

    Specifies the swipe scrolling speed(in millisecond).

    Default Value

    • 600

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller</b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//To set the animationSpeed property of Scroller during initialization
        $("#scrollContent").ejScroller({animationSpeed: 1000 });      
</script>

    autoHide boolean

    Set true to hides the scrollbar, when mouseout the content area.

    Default Value

    • false

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller</b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//To enable the autoHide property of Scroller during initialization
        $("#scrollContent").ejScroller({autoHide: true });      
</script>

    buttonSize number

    Specifies the height and width of button in the scrollbar.

    Default Value

    • 18

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//To set Button Size of Scroller during initialization
        $("#scrollContent").ejScroller({buttonSize: 20 });      
</script>

    enabled boolean

    Specifies to enable or disable the scroller

    Default Value

    • true

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//Enable or disable scroller API on initialization
        $("#scrollContent").ejScroller({enabled: true });       
</script>

    enablePersistence boolean

    Save current model value to browser cookies for state maintenance. While refresh the page Rating control values are retained.

    Default Value

    • false

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//Enable enablePersistence API on initialization
        $("#scrollContent").ejScroller({enablePersistence: true });
</script>

    enableRTL boolean

    Indicates the Right to Left direction to scroller

    Default Value

    • undefined

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//Enable enableRTL API on initialization
        $("#scrollContent").ejScroller({enableRTL: true });     
</script>

    enableTouchScroll boolean

    Enables or Disable the touch Scroll

    Default Value

    • true

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//Disable Touch Scroll API on initialization
        $("#scrollContent").ejScroller({enableTouchScroll: false });    
</script>

    height number|string

    Specifies the height of Scroll panel and scrollbars.

    Default Value

    • 250

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//To set height API value during initialization  
        $("#scrollContent").ejScroller({height: 200 }); 
</script>

    scrollerSize number

    If the scrollbar has vertical it set as width, else it will set as height of the handler.

    Default Value

    • 18

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//Enable scrollerSize on initialization 
        //To set scroller Size API value 
        $("#scrollContent").ejScroller({scrollerSize: 20 });    
</script>

    scrollLeft number

    The Scroller content and scrollbars move left with given value.

    Default Value

    • 0

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//To set Scroll left API during initialization
        $("#scrollContent").ejScroller({scrollLeft: 40 });      
</script>

    scrollOneStepBy number

    While press on the arrow key the scrollbar position added to the given pixel value.

    Default Value

    • 57

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//To set scrollOneStepBy API value during initialization
        $("#scrollContent").ejScroller({scrollOneStepBy: 40 }); 
</script>

    scrollTop number

    The Scroller content and scrollbars move to top position with specified value.

    Default Value

    • 0

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//To set Scroll top API during initialization
        $("#scrollContent").ejScroller({scrollTop: 40 });       
</script>

    targetPane string

    Indicates the target area to which scroller have to appear.

    Default Value

    • null

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//To set Scroller for the specified target panel during initialization
        $("#scrollContent").ejScroller({targetPane: "contentArea" });   
</script>

    width number|string

    Specifies the width of Scroll panel and scrollbars.

    Default Value

    • 0

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//To set width API value during initialization
        $("#scrollContent").ejScroller({width: 500 });  
</script>

    Methods

    destroy()

    destroy the Scroller control, unbind the all ej control related events automatically and bring the control to pre-init state.

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul><li>
<b>A controller</b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
// Destroy Scroller
var scrollerObj  = $("#scrollContent").data("ejScroller");
scrollerObj.destroy(); // destroy the scroller
</script>
  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul><li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
// destroy the scroller
$("#scrollContent").ejScroller("destroy");      
</script>

    disable()

    User disables the Scroller control at any time.

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
// To disable the Scroller control at any time.
var scrollerObj  = $("#scrollContent").data("ejScroller");
scrollerObj.disable(); // disable the Scroller control at any time
</script>
  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
// disable the scroller control
$("#scrollContent").ejScroller("disable");      
</script>

    enable()

    User enables the Scroller control at any time.

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
// To enable the Scroller control at any time.
var scrollerObj  = $("#scrollContent").data("ejScroller");
scrollerObj.enable(); // enable the Scroller control at any time
</script>
  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
// enables the scroller control
$("#scrollContent").ejScroller("enable");       
</script>

    isHScroll()

    Returns true if horizontal scrollbar is shown, else return false.

    Returns:

    boolean

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
// To check horizontal scrollbar is rendered or not
var scrollerObj  = $("#scrollContent").data("ejScroller");
scrollerObj.isHScroll(); // Returns horizontal scrollbar is shown or not.
</script>
  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
// To check horizontal scrollbar is rendered or not
$("#scrollContent").ejScroller("isHScroll");    
</script>

    isVScroll()

    Returns true if vertical scrollbar is shown, else return false.

    Returns:

    boolean

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
// To check vertical scrollbar is rendered or not
var scrollerObj  = $("#scrollContent").data("ejScroller");
scrollerObj.isVScroll(); // Returns vertical scrollbar is shown or not.
</script>
  • HTML
    • <div id="scrollContent" style="width:900px;">
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
// To check vertical scrollbar is rendered or not
$("#scrollContent").ejScrollBar("isVScroll");   
</script>

    refresh()

    User refreshes the Scroller control at any time.

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
// To refresh the Scroller control at any time.
var scrollerObj  = $("#scrollContent").data("ejScroller");
scrollerObj.refresh(); // refreshes the Scroller control at any time
</script>
  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
// Refresh the scroller control
$("#scrollContent").ejScroller("refresh");      
</script>

    scrollX(pixel, disableAnimation, animationSpeed)

    Horizontal scroller moves to given pixel from its origin position. We can also specify the animation speed,in which the scroller has to move while re-positioning it.

    Name Type Description
    pixel number|string Horizontal scroller moves to the specified pixel.
    disableAnimation boolean Specifies to enable/disable the animation.
    animationSpeed number Specifies the animation speed when scrolling, if animation is enabled.

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
// Moves scroller to given pixel in X (left) position.
var scrollerObj  = $("#scrollContent").data("ejScroller");
scrollerObj.scrollX(25); // call scrollX method(with animation disabled)
scrollObj.scrollX(25,false,1000); // call scrollX method(with animation enabled. the third parameter "1000" indicates the animation speed while re-positioning the scroller)
</script>
  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
//Moves scroller to given pixel in X (left) position.
$("#scrollContent").ejScroller("scrollX", 25, true);    // call scrollX method(with animation disabled. "true" indicates animation is off)
$("#scrollContent").ejScroller("scrollX", 25,false,1000);       // call scrollX method(with animation enabled. Here, the fourth parameter "1000" indicates the animation speed while re-positioning the scroller)
</script>

    scrollY(pixel, disableAnimation, animationSpeed)

    Vertical scroller moves to given pixel from its origin position. We can also specify the animation speed,in which the scroller has to move while re-positioning it.

    Name Type Description
    pixel number|string Vertical scroller moves to the specified pixel.
    disableAnimation boolean Specifies to enable/disable the animation.
    animationSpeed number Specifies the animation speed when scrolling, if animation is enabled.

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller </b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
// Moves scroller to given pixel in Y (top) position.
var scrollerObj  = $("#scrollContent").data("ejScroller");
scrollerObj.scrollY(25); // call scrollY method(with animation disabled)
scrollObj.scrollY(25,false,1000); // call scrollY method(with animation enabled. the third parameter "1000" indicates the animation speed while re-positioning the scroller)
</script>
  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller</b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
$('#scrollContent').ejScroller();       
//Moves scroller to given pixel in Y (top) position.
$("#scrollContent").ejScroller("scrollY", 25, true);    // call scrollY method(with animation disabled. "true" indicates animation is off)
$("#scrollContent").ejScroller("scrollY", 25,false,1000);       // call scrollY method(with animation enabled. Here, fourth parameter "1000" indicates the animation speed while re-positioning the scroller)
</script>

    Events

    create

    Fires when Scroller control is created.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the scroller model
    type string returns the name of the event.

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller</b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//create event for scroller
$("#scrollContent").ejScroller({
   create: function (args) {}
});   
</script>

    destroy

    Fires when Scroller control is destroyed.

    </tbody>
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the scroller model
    type string returns the name of the event.

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller</b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//destroy event for scroller
$("#scrollContent").ejScroller({
   destroy: function (args) {}
});  
</script>

    thumbMove

    Fires when a thumb point is moved along the touch surface.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the scroller model
    originalEvent object returns the original event name and its event properties of the current event.
    scrollData object returns the current data related to the event.
    type string returns the name of the event.

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller</b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//thumbMove event for scroller
$("#scrollContent").ejScroller({
   thumbMove: function (args) {}
});  
</script>

    thumbStart

    Fires when a thumb point is placed on the touch surface.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the scroller model
    originalEvent object returns the original event name and its event properties of the current event.
    scrollData object returns the current data related to the event.
    type string returns the name of the event.

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller</b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//thumbStart event for scroller
$("#scrollContent").ejScroller({
   thumbStart: function (args) {}
});  
</script>

    thumbEnd

    Fires when a thumb point is removed from the touch surface.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the scroller model
    originalEvent object returns the original event name and its event properties of the current event.
    scrollData object returns the current data related to the event.
    type string returns the name of the event.

    Example

  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller</b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//thumbEnd event for scroller
$("#scrollContent").ejScroller({
   thumbEnd: function (args) {}
});  
</script>

    wheelMove

    It fires whenever the mouse wheel is rotated either in upwards or downwards.

    </tr> </tbody> </table> #### Example
  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller</b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//wheelMove event for scroller
$("#scrollContent").ejScroller({
   wheelMove: function (args) {}
});  
</script>
    ### wheelStart {:#events:wheelstart} It will fire when mouse trackball has been start to wheel.
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the scroller model
    originalEvent object returns the original event name and its event properties of the current event.
    direction number returns the trackball scrolling direction. If it returns 1, the wheel moved top to bottom direction. or if it returns -1, the wheel moved bottom to top direction.
    scrollData object returns the current data related to the event.
    type string returns the name of the event.
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the scroller model
    originalEvent object returns the original event name and its event properties of the current event.
    scrollData object returns the current data related to the event.
    type string returns the name of the event.
    #### Example
  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller</b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//wheelStart event for scroller
$("#scrollContent").ejScroller({
   wheelStart: function (args) {}
});  
</script>
    ### wheelStop {:#events:wheelstop} It will fire when mouse trackball has been stop to wheel. </tr> </tbody> </table> #### Example
  • HTML
    • <div id="scrollContent" style="width:900px;" >
<div>
<p>Model view controller (MVC) is a software architecture pattern which separates the
representation of information from the user's interaction with it.
The model consists of application data, business rules, logic, and functions. A view can be any
output representation of data, such as a chart or a diagram. Multiple views of the same data 
are possible, such as a bar chart for management and a tabular view for accountants. 
The controller mediates input, converting it to commands for the model or view.The central 
ideas behind MVC are code reusable and in addition to dividing the application into three 
kinds of components, the MVC design defines the interactions between them.

<ul>
<li>
<b>A controller</b>can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). 
It can also send commands to the model to update the model's state (e.g., editing a document).
</li>
</ul> 
</div>
</div> 
 
<script>
//wheelStop event for scroller
$("#scrollContent").ejScroller({
   wheelStop: function (args) {}
});  
</script>
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the scroller model
    type string returns the name of the event.
    originalEvent object returns the original event name and its event properties of the current event.
    direction number returns the trackball scrolling direction. If it returns 1, the wheel moved top to bottom direction. or if it returns -1, the wheel moved bottom to top direction.
    scrollData object returns the current data related to the event.