ejScroller

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

  • ts
  • export class AppComponent { 
            constructor(){
            
            }
     }

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            constructor(){
            
            }
     }

    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
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [animationSpeed]="animationSpeed">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            animationSpeed:number;
            constructor(){
            this.animationSpeed = 1000;
            }
     }

    autoHide boolean

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

    Default Value

    • false

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [autoHide]="autoHide">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            autoHide:boolean;
            constructor(){
            this.autoHide = true;
            }
     }

    buttonSize number

    Specifies the height and width of button in the scrollbar.

    Default Value

    • 18

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [buttonSize]="buttonSize">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            buttonSize:number;
            constructor(){
            this.buttonSize = 20;
            }
     }

    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>
  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [enabled]="enabled">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            enabled:boolean;
            constructor(){
            this.enabled = 20;
            }
     }

    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
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [enablePersistence]="enablePersistence">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            enablePersistence:boolean;
            constructor(){
            this.enablePersistence = 20;
            }
     }

    enableRTL boolean

    Indicates the Right to Left direction to scroller

    Default Value

    • undefined

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [enableRTL]="enableRTL">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            enableRTL:boolean;
            constructor(){
            this.enableRTL = true;
            }
     }

    enableTouchScroll boolean

    Enables or Disable the touch Scroll

    Default Value

    • true

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [enableTouchScroll]="enableTouchScroll">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            enableTouchScroll:boolean;
            constructor(){
            this.enableTouchScroll = false;
            }
     }

    height number|string

    Specifies the height of Scroll panel and scrollbars.

    Default Value

    • 250

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [height]="height">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            height:number;
            constructor(){
            this.height = 200;
            }
     }

    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
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [scrollerSize]="scrollerSize">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            scrollerSize:number;
            constructor(){
            this.scrollerSize = 20;
            }
     }

    scrollLeft number

    The Scroller content and scrollbars move left with given value.

    Default Value

    • 0

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [scrollLeft]="scrollLeft">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            scrollLeft:number;
            constructor(){
            this.scrollLeft = 40;
            }
     }

    scrollOneStepBy number

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

    Default Value

    • 57

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [scrollOneStepBy]="scrollOneStepBy">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            scrollOneStepBy:number;
            constructor(){
            this.scrollOneStepBy = 60;
            }
     }

    scrollTop number

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

    Default Value

    • 0

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [scrollTop]="scrollTop">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            scrollTop:number;
            constructor(){
            this.scrollTop = 40;
            }
     }

    targetPane string

    Indicates the target area to which scroller have to appear.

    Default Value

    • null

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [targetPane]="targetPane">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            targetPane:string;
            constructor(){
            this.targetPane = "contentArea";
            }
     }

    width number|string

    Specifies the width of Scroll panel and scrollbars.

    Default Value

    • 0

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" [width]="width">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent { 
            width:number;
            constructor(){
            this.width = 500;
            }
     }

    Methods

    destroy()

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

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • // Destroy Scroller
    var scrollerObj  = $("#scrollContent").data("ejScroller");
    scrollerObj.destroy(); // destroy the scroller

    disable()

    User disables the Scroller control at any time.

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • // To disable the Scroller control at any time.
    var scrollerObj  = $("#scrollContent").data("ejScroller");
    scrollerObj.disable(); // disable the Scroller control at any time

    enable()

    User enables the Scroller control at any time.

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • // To enable the Scroller control at any time.
    var scrollerObj  = $("#scrollContent").data("ejScroller");
    scrollerObj.enable(); // enable the Scroller control at any time

    isHScroll()

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

    Returns:

    boolean

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • // To check horizontal scrollbar is rendered or not
    var scrollerObj  = $("#scrollContent").data("ejScroller");
    scrollerObj.isHScroll(); // Returns horizontal scrollbar is shown or not.

    isVScroll()

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

    Returns:

    boolean

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • // To check vertical scrollbar is rendered or not
    var scrollerObj  = $("#scrollContent").data("ejScroller");
    scrollerObj.isVScroll(); // Returns vertical scrollbar is shown or not.

    refresh()

    User refreshes the Scroller control at any time.

    Example

  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • // To refresh the Scroller control at any time.
    var scrollerObj  = $("#scrollContent").data("ejScroller");
    scrollerObj.refresh(); // refreshes the Scroller control at any time

    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
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • // 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)

    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
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • // 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)

    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
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" (create)="onCreate($event)">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onCreate(e:any){
             // your code here
            }
    }

    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
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" (destroy)="onDestroy($event)">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onDestroy(e:any){
             // your code here
            }
    }

    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
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" (thumbMove)="onThumbMove($event)">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onThumbMove(e:any){
             // your code here
            }
    }

    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
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" (thumbStart)="onThumbStart($event)">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onThumbStart(e:any){
             // your code here
            }
    }

    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
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" (thumbEnd)="onThumbEnd($event)">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onThumbEnd(e:any){
             // your code here
            }
    }

    wheelMove

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

    </tr> </tbody> </table> #### Example
  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" (wheelMove)="onWheelMove($event)">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onWheelMove(e:any){
             // your code here
            }
    }
    ### 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
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" (wheelStart)="onWheelStart($event)">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onWheelStart(e:any){
             // your code here
            }
    }
    ### wheelStop {:#events:wheelstop} It will fire when mouse trackball has been stop to wheel. </tr> </tbody> </table> #### Example
  • html
  • <ej-scroller id="scrollContent" height="300" width="460px" style="display:block;border:1px solid #bbbcbb" (wheelStop)="onWheelStop($event)">
        <div>
            <div class="sampleContent" style="width:700px;padding:10px">
                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 n addition to dividing
                the application into three kinds of components, the MVC design defines the interactions between them.
            </div>
        </div>
    </ej-scroller>
  • ts
  • export class AppComponent{
            constructor(){        
            }
            onWheelStop(e:any){
             // your code here
            }
    }
    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.