ejScroller

8 Nov 201724 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

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>

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

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>

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>

export class AppComponent { 
        autoHide:boolean;
        constructor(){
        this.autoHide = true;
        }
 }

buttonSize `number`

Specifies the height and width of button in the scrollbar.

Default Value

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>

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>

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>

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>

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>

export class AppComponent { 
        enableTouchScroll:boolean;
        constructor(){
        this.enableTouchScroll = false;
        }
 }

height `number|string`

Specifies the height of Scroll panel and scrollbars.

Default Value

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>

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

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>

export class AppComponent { 
        scrollerSize:number;
        constructor(){
        this.scrollerSize = 20;
        }
 }

scrollLeft `number`

The Scroller content and scrollbars move left with given value.

Default Value

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>

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

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>

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

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>

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>

export class AppComponent { 
        targetPane:string;
        constructor(){
        this.targetPane = "contentArea";
        }
 }

width `number|string`

Specifies the width of Scroll panel and scrollbars.

Default Value

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>

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>

// 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>

// 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>

// 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>

// 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>

// 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>

// 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>

// 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>

// 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>

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>

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>

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>

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>

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>

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>

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>

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.

ejScroller

Syntax

Example

Requires

Members

animationSpeed number

Default Value

Example

autoHide boolean

Default Value

Example

buttonSize number

Default Value

Example

enabled boolean

Default Value

Example

enablePersistence boolean

Default Value

Example

enableRTL boolean

Default Value

Example

enableTouchScroll boolean

Default Value

Example

height number|string

Default Value

Example

scrollerSize number

Default Value

Example

scrollLeft number

Default Value

Example

scrollOneStepBy number

Default Value

Example

scrollTop number

Default Value

Example

targetPane string

Default Value

Example

width number|string

Default Value

Example

Methods

destroy()

Example

disable()

Example

enable()

Example

isHScroll()

Returns:

Example

isVScroll()

Returns:

Example

refresh()

Example

scrollX(pixel, disableAnimation, animationSpeed)

Example

scrollY(pixel, disableAnimation, animationSpeed)

Example

Events

create

Example

destroy

Example

thumbMove

Example

thumbStart

Example

thumbEnd

Example

wheelMove

animationSpeed `number`

autoHide `boolean`

buttonSize `number`

enabled `boolean`

enablePersistence `boolean`

enableRTL `boolean`

enableTouchScroll `boolean`

height `number|string`

scrollerSize `number`

scrollLeft `number`

scrollOneStepBy `number`

scrollTop `number`

targetPane `string`

width `number|string`