Ignite UI™ API Documentation

ui.igScroll

The igScroll is a jQueryUI widget that features support for custom fluid scrolling functionality via custom or native scrollbars on all devices. It allows detailed customization of the look of the scrollbars and the scrolling behavior via the related options and css classes. >

You can find further information regarding the classes, options, events, methods and themes of this widget under the associated tabs above.

The following code snippet demonstrates how to initialize the igScroll control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the controls read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
    <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $("#scrollableContent").igScroll({
                alwaysVisible:true,
                smoothing: true
        });
    });
    </script>
</head>
<body>
    div id='scrContainerLeft' style="height:200px; width:500px; overflow: hidden;" tabIndex='0'>
        <div style="width: 800px;">
            <p>
            Lorem ipsum dolor sit amet, dicat maluisset urbanitas has id, consul admodum contentiones mel te. Nam paulo utinam qualisque in, lorem definiebas theophrastus mea ex. <br/>
            Scripta sanctus definitionem qui at. Erat fugit dicit at sea, ne quo alia illud viris. <br/>
            Latine legendos ut eum. Usu purto nihil dolor ei, has et iriure scripta, ex antiopam electram duo. <br/>
            </p>
            Te ludus malorum periculis has, no veri dissentiet sea. <br/>
            Probo lucilius an vel, his eu purto falli, populo graecis postulant has at. <br/>
            Suas sale mediocritatem in vis. Has noster semper perpetua in. Sed ex nostrum temporibus, affert interpretaris no pro. <br/>
            <p>
            Cu eirmod omnesque offendit per, invidunt corrumpit intellegebat duo et. <br/>
            Sed ne sonet apeirian. Cum at clita molestie democritum, diam expetenda ius ei. <br/>
            In est sale tamquam reformidans, dolore ponderum ius et. Te sea mutat hendrerit, habeo noster vis ad. <br/>
            Quem feugiat feugait usu id. His utinam apeirian in, repudiare accommodare ex mea, id qui modo mazim eleifend. <br/>
            </p>
            Cum elitr ludus ut. Eu mel aliquando conceptam adolescens. <br/>
            Malis vitae labore vis ea, eam an error accumsan. <br/>
            Ceteros sapientem assentior mel at, graeco ancillae moderatius ea eum. <br/>
            Ei nam delenit admodum deterruisset. <br/>
            <p>
            Cum ad animal oblique, sensibus reprehendunt his te, quo ignota dictas no. <br/>
            Eu congue lucilius mei, has ei invenire platonem. Cu nonumy tamquam moderatius cum. <br/>
            At lucilius deterruisset vis, omnis minimum complectitur ea his. <br/>
            </p>
        </div>
    </div>
</body>
</html>
        

Related Samples

Basic Usage

alwaysVisible

Type:: bool
Default:: false

Sets or gets if the scrollbars should be always visible (on all environments). Otherwise it will be the default behavior. Note: this option is only for the custom scrollbars set through the scrollbarType option.

Code Sample

//Initialize
$(".selector").igScroll({
    alwaysVisible: true
});
 
//Get
    var alwaysVisible = $(".selector").igScroll("option", "alwaysVisible");
 
//Set
$(".selector").igScroll("option", "alwaysVisible", true);

bigIncrementStep

Type:: number
Default:: null

Sets gets the step of the default scrolling behavior when using any of the custom scrollbar track areas.

Code Sample

//Initialize
$(".selector").igScroll({
    bigIncrementStep: 200
});
 
//Get
var bigIncrementStep = $(".selector").igScroll("option", "bigIncrementStep");
 
//Set
$(".selector").igScroll("option", "bigIncrementStep", 200);

inertiaDeltaX

Type:: number
Default:: 1.25

Sets gets at least how many times the horizontal speed should be bigger so the inertia proceeds only horizontally without scrolling vertically. This is to improve interactions due to not perfectly swiping left/right with some deviation down/up.

Code Sample

//Initialize
$(".selector").igScroll({
    inertiaDeltaX: 1.5
});
 
//Get
var inertiaDeltaX = $(".selector").igScroll("option", "inertiaDeltaX");
 
//Set
$(".selector").igScroll("option", "inertiaDeltaX", 1.5);

inertiaDeltaY

Type:: number
Default:: 2

Sets gets at least how many times the vertical speed should be bigger so the inertia proceeds only vertically without scrolling horizontally. This is to improve interactions due to not perfectly swiping down/up with some deviation left/right.

Code Sample

//Initialize
$(".selector").igScroll({
    inertiaDeltaY: 3
});
 
//Get
var inertiaDeltaY = $(".selector").igScroll("option", "inertiaDeltaY");
 
//Set
$(".selector").igScroll("option", "inertiaDeltaY", 3);

inertiaDuration

Type:: number
Default:: 1

Sets gets the modifier for how long the inertia last on mobile devices.

Code Sample

//Initialize
$(".selector").igScroll({
    inertiaDuration: 2
});
 
//Get
var inertiaDuration = $(".selector").igScroll("option", "inertiaDuration");
 
//Set
$(".selector").igScroll("option", "inertiaDuration", 2);

inertiaStep

Type:

number

Default:

1

Sets gets the modifier for how much the inertia scrolls on mobile devices.

Code Sample

//Initialize
$(".selector").igScroll({
inertiaStep: 2
});

//Get
var inertiaDuration = $(".selector").igScroll("option", "inertiaStep");

//Set
$(".selector").igScroll("option", "inertiaStep", 2);
modifyDOM

Type:

bool

Default:

true

Sets or gets if igScroll can modify the DOM when it is initialized on certain element so that the content can be scrollable.

Code Sample

//Initialize
$(".selector").igScroll({
modifyDOM: false
});

//Get
var modifyDOM = $(".selector").igScroll("option", "modifyDOM");

scrollbarH

Type:: string
Default:: null

Sets gets html or jQuery element which is used for horizontal scrolling.

Code Sample

<div id='customHScroll' style='width:200px; overflow-x:auto;'>
    <div style='width:500px; height:1px;'></div>
</div>
 
//Initialize
$(".selector").igScroll({
    scrollbarType: "none",
    scrollbarH: $("#customHScroll")
});
 
//Get
var scrollbarH = $(".selector").igScroll("option", "scrollbarH");

scrollbarHParent

Type:

string

Default:

null

Sets gets html or jQuery element to which the horizontal scrollbar will be appended to.

Code Sample

<div id='parentH'>
</div>

//Initialize
$(".selector").igScroll({
scrollbarHParent: $("#parentH")
});

//Get
var scrollbarHParent = $(".selector").igScroll("option", "scrollbarHParent");

scrollbarType

Type:: enumeration
Default:: custom

Sets or gets what type of scrollbars should be using the igScroll (on all environments).

Members

custom
Type:string
Custom scrollbars with custom ui and events.
native
Type:string
Native scrollbars.
none
Type:string
No scrollbars should be visible.

Code Sample

//Initialize
$(".selector").igScroll({
    scrollbarType: "native"
});
//Get
    var scrollbarType = $(".selector").igScroll("option", "scrollbarType");
//Set
$(".selector").igScroll("option", "scrollbarType", "native");

scrollbarV

Type:: string
Default:: null

Sets gets html or jQuery element which is used for vertical scrolling.

Code Sample

<div id='customVScroll' style='height:200px; overflow-y:auto; float:left; position:relative;'>
    <div style='width:20px; height:500px;'></div>
</div>
 
//Initialize
$(".selector").igScroll({
    scrollbarType: "none",
    scrollbarV:  $("#customVScroll")
});
 
//Get
var scrollbarV = $(".selector").igScroll("option", "scrollbarV");

scrollbarVParent

Type:

string

Default:

null

Sets gets html or jQuery element to which the vertical scrollbar will be appended to.

Code Sample

<div id='parentV'>
</div>

//Initialize
$(".selector").igScroll({
scrollbarVParent: $("#parentV")
});

//Get
var scrollbarVParent = $(".selector").igScroll("option", "scrollbarVParent");

scrollHeight

Type:: number
Default:: null

Sets custom value for how high is actually the content. Useful when wanting to scroll and update the shown content manually.

Code Sample

//Initialize
$(".selector").igScroll({
    scrollHeight: 1000
});
 
//Get
var scrollHeight = $(".selector").igScroll("option", "scrollHeight");
 
//Set
$(".selector").igScroll("option", "scrollHeight", 1000);

scrollLeft

Type:

number

Default:

0

Sets gets current horizontal position of the content.

Code Sample

//Initialize
$(".selector").igScroll({
scrollLeft: 200
});

//Get
var scrollLeft = $(".selector").igScroll("option", "scrollLeft");

//Set
$(".selector").igScroll("option", "scrollLeft", 200);

scrollOnlyHBar

Type:: bool
Default:: false

Sets gets if only the linked horizontal scrollbar should be used for horizontal scrolling. Note: The behavior when the linked scrollbar is scrolled in this case should be handled manually.

Code Sample

//Initialize
$(".selector").igScroll({
    scrollOnlyHBar: true
});
 
//Get
var scrollOnlyHBar = $(".selector").igScroll("option", "scrollOnlyHBar");
 
//Set
$(".selector").igScroll("option", "scrollOnlyHBar", true);

scrollOnlyVBar

Type:: bool
Default:: false

Sets gets if only the linked vertical scrollbar should be used for vertical scrolling. Note: The behavior when the linked scrollbar is scrolled in this case should be handled manually.

Code Sample

//Initialize
$(".selector").igScroll({
    scrollOnlyVBar: true
});
 
//Get
var scrollOnlyVBar = $(".selector").igScroll("option", "scrollOnlyVBar");
 
//Set
$(".selector").igScroll("option", "scrollOnlyVBar", true);

scrollTop

Type:

number

Default:

0

Sets gets current vertical position of the content.

Code Sample

//Initialize
$(".selector").igScroll({
scrollTop: 200
});

//Get
var scrollTop = $(".selector").igScroll("option", "scrollTop");

//Set
$(".selector").igScroll("option", "scrollTop", 200);

scrollWidth

Type:: number
Default:: null

Sets custom value for what width is actually the content. Useful when wanting to scroll and update the shown content manually.

Code Sample

//Initialize
$(".selector").igScroll({
    scrollWidth: 1200
});
 
//Get
var scrollWidth = $(".selector").igScroll("option", "scrollWidth");
 
//Set
$(".selector").igScroll("option", "scrollWidth", 1200);

smallIncrementStep

Type:: number
Default:: 40

Sets gets the step of the default scrolling behavior when using any of the custom scrollbar arrows.

Code Sample

//Initialize
$(".selector").igScroll({
    smallIncrementStep: 25
});
 
//Get
var smallIncrementStep = $(".selector").igScroll("option", "smallIncrementStep");
 
//Set
$(".selector").igScroll("option", "smallIncrementStep", 25);

smoothing

Type:

bool

Default:

false

Sets gets if smoother scrolling with small intertia should be used when using mouse wheel.

Code Sample

//Initialize
$(".selector").igScroll({
smoothing: true
});

//Get
var smoothing = $(".selector").igScroll("option", "smoothing");

//Set
$(".selector").igScroll("option", "smoothing", true);

smoothingDuration

Type:: number
Default:: 1

Sets or gets the modifier for how long the scroll ‘animation’ lasts when using the mouse wheel once. This is used only for the smooth scrolling behavior.

Code Sample

//Initialize
$(".selector").igScroll({
    smoothingDuration: 2
});
 
//Get
var smoothingDuration = $(".selector").igScroll("option", "smoothingDuration");
 
//Set
$(".selector").igScroll("option", "smoothingDuration", 2);

smoothingStep

Type:: number
Default:: 1

Sets or gets the modifier for how many pixels will be scrolled when using the mouse wheel once. This is used only for the smooth scrolling behavior.

Code Sample

//Initialize
$(".selector").igScroll({
    smoothingStep: 2
});
 
//Get
var smoothingStep = $(".selector").igScroll("option", "smoothingStep");
 
//Set
$(".selector").igScroll("option", "smoothingStep", 2);

swipeToleranceX

Type:: number
Default:: 30

Sets gets how much pixels of toleration there will be when initially swiping horizontally. This is to improve swiping up/down without scrolling left/right when not intended due to small deviation left/right.

Code Sample

//Initialize
$(".selector").igScroll({
    swipeToleranceX: 20
});
 
//Get
var swipeToleranceX = $(".selector").igScroll("option", "swipeToleranceX");
 
//Set
$(".selector").igScroll("option", "swipeToleranceX", 20);

syncedElemsH

Type:: array
Default:: []
Elements Type:: object

Sets gets elements that are linked to the main content horizontally. When the content is scrolled on X axis the linked elements scroll accordingly.

Code Sample

<div id='scrContainerLeft' style="width:200px; height:200px; overflow: hidden;">
    <div style="width:900px; height: 400px;">
    </div>
<div>
 
//Initialize
$(".selector").igScroll({
    syncedElemsH: [$("#scrContainerLeft")]
});
 
//Get
var syncedElemsH = $(".selector").igScroll("option", "syncedElemsH");
 
//Set
$(".selector").igScroll("option", "syncedElemsH", $("#scrContainerLeft"));

syncedElemsV

Type:: array
Default:: []
Elements Type:: object

Sets gets elements that are linked to the main content vertically. When the content is scrolled on Y axis the linked elements scroll accordingly.

Code Sample

<div id='scrContainerLeft' style="width:200px; height:200px; overflow: hidden;">
    <div style="width:900px; height: 400px;">
    </div>
<div>
 
//Initialize
$(".selector").igScroll({
    syncedElemsV: [$("#scrContainerLeft")]
});
 
//Get
var syncedElemsV = $(".selector").igScroll("option", "syncedElemsV");
 
//Set
$(".selector").igScroll("option", "syncedElemsV", $("#scrContainerLeft"));

wheelStep

Type:

number

Default:

50

Sets gets the step of the default scrolling behavior when using mouse wheel.

Code Sample

//Initialize
$(".selector").igScroll({
wheelStep: 200
});

//Get
var wheelStep = $(".selector").igScroll("option", "wheelStep");

//Set
$(".selector").igScroll("option", "wheelStep", 200);

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

rendered

Cancellable:: false

Event which is raised after the scroller has been rendered fully.

evt
Type:Event

JQuery event object.
args
Type:Object

Code Sample

//Delegate
$(document).delegate(".selector", "igscrollrendered", function (evt, args) {
    //return reference to igScroll
    args.owner;
});
 
//Initialize
$(".selector").igScroll({
    rendered: function(evt, args) {...}
});

scrolled

Cancellable:: false

Event which is raised after scrolling has stopped.

evt
Type:Event

JQuery event object.
args
Type:Object

Code Sample

//Delegate
$(document).delegate(".selector", "igscrollscrolled", function (evt, args) {
    //return reference to igScroll
    args.owner;
    //returns if the content is scrolled by the arrow : 0 - none used, -1 - Arrow Up/Left, 1 - Arrow Down/Right.
    args.smallIncrement
    //returns if the content is scrolled by the scrollbar track areas: 0 - none used, -1 - Scrolled Up/Left, 1 - Scrolled Down/Right.
    args.bigIncrement
    //returns which axis is being used to scroll - horizontal(true) or vertical(false).
    args.horizontal
});
 
//Initialize
$(".selector").igScroll({
    scrolled: function(evt, args) {...}
});

scrolling

Cancellable:: true

Event which is raised before scrolling or before each step when having inertia.
Return false in order to cancel action.

evt
Type:Event

JQuery event object.
args
Type:Object

Code Sample

//Delegate
$(document).delegate(".selector", "igscrollscrolling", function (evt, args) {
    //return reference to igScroll
    args.owner;
    //returns if the content is scrolled by the arrow : 0 - none used, -1 - Arrow Up/Left, 1 - Arrow Down/Right.
    args.smallIncrement
    //returns if the content is scrolled by the scrollbar track areas: 0 - none used, -1 - Scrolled Up/Left, 1 - Scrolled Down/Right.
    args.bigIncrement
    //returns which axis is being used to scroll - horizontal(true) or vertical(false).
    args.horizontal
    //returns how much the content will be scrolled horizontally
    args.stepX
    //returns how much the content will be scrolled vertically
    args.stepY
});
 
//Initialize
$(".selector").igScroll({
    scrolling: function(evt, args) {...}
});

thumbDragEnd

Cancellable:: false

Event which is raised on mouse up from the scrollbar's thumb drag.

evt
Type:Event

JQuery event object.
args
Type:Object

Code Sample

//Delegate
$(document).delegate(".selector", "igscrollthumbdragend", function (evt, args) {
    //return reference to igScroll
    args.owner;
    //returns which axis is being used to scroll - horizontal(true) or vertical(false).
    args.horizontal
});
 
//Initialize
$(".selector").igScroll({
    thumbDragEnd: function(evt, args) {...}
});

thumbDragMove

Cancellable:: true

Event which is raised when the thumb drag is being moved.

evt
Type:Event

JQuery event object.
args
Type:Object

Code Sample

//Delegate
$(document).delegate(".selector", "igscrollthumbdragmove", function (evt, args) {
    //return reference to igScroll
    args.owner;
    //returns which axis is being used to scroll - horizontal(true) or vertical(false).
    args.horizontal
    //returns how much the content will be scrolled horizontally
    args.stepX
    //returns how much the content will be scrolled vertically
    args.stepY
});
 
//Initialize
$(".selector").igScroll({
    thumbDragMove: function(evt, args) {...}
});

thumbDragStart

Cancellable:: false

Event which is raised when there is mouse click on the scrollbar's thumb drag.

evt
Type:Event

JQuery event object.
args
Type:Object

Code Sample

//Delegate
$(document).delegate(".selector", "igscrollthumbdragstart", function (evt, args) {
    //return reference to igScroll
    args.owner;
    //returns which axis is being used to scroll - horizontal(true) or vertical(false).
    args.horizontal
});
 
//Initialize
$(".selector").igScroll({
    thumbDragStart: function(evt, args) {...}
});

Show Details

destroy

.igScroll( "destroy" );
Code Sample

$(".selector").igScroll("destroy");
option

.igScroll( "option", optionName:object, value:object );
- optionName
- Type:object
- value
- Type:object
refresh

.igScroll( "refresh" );
Code Sample

$(".selector").igScroll("refresh");

igscroll-select-disabled

Classes applied to an element that prevents selection when dragging.
igscroll-harrow

Classes applied to the arrows of the custom horizontal scrollbar.
igscroll-leftarrow

Classes applied to the Arrow Left of the custom horizontal scrollbar.
igscroll-leftarrow-active

Classes applied to the Arrow Left of the custom horizontal scrollbar when it is active.
igscroll-rightarrow

Classes applied to the Arrow Right of the custom horizontal scrollbar.
igscroll-rightarrow-active

Classes applied to the Arrow Right of the custom horizontal scrollbar when it is active.
igscroll-hcontainer

Classes applied to the container of the custom horizontal scrollbar.
igscroll-hdrag

Classes applied to the thumb drag of the custom horizontal scrollbar.
igscroll-hdrag-big

Classes applied to the thumb drag of the custom horizontal scrollbar when it is in big form.
igscroll-hdrag-thin

Classes applied to the thumb drag of the custom horizontal scrollbar when it is in thin form.
igscroll-htrack

Classes applied to the track of the custom horizontal scrollbar.
igscroll-hnative-inner

Classes applied to the inner element of the native horizontal scrollbar.
igscroll-hnative-outer

Classes applied to the outer element of the native horizontal scrollbar.
igscroll-vnative-inner

Classes applied to the inner element of the native vertical scrollbar.
igscroll-vnative-outer

Classes applied to the outer element of the native vertical scrollbar.
igscroll-scrollable

Classes applied to the element the igScroll is instantiated on.
igscroll-container

Classes applied to the scroll container.
igscroll-content

Classes applied to the scroll content wrapper.
igscroll-touchscrollable

Classes applied to the element the igScroll is instantiated on, related to touch scrolling.
igscroll-varrow

Classes applied to the arrows of the custom vertical scrollbar.
igscroll-downarrow

Classes applied to the Arrow Down of the custom vertical scrollbar.
igscroll-downarrow-active

Classes applied to the Arrow Down of the custom vertical scrollbar when it is active.
igscroll-uparrow

Classes applied to the Arrow Up of the custom vertical scrollbar.
igscroll-uparrow-active

Classes applied to the Arrow Up of the custom vertical scrollbar when it is active.
igscroll-vcontainer

Classes applied to the container of the custom vertical scrollbar.
igscroll-vdrag

Classes applied to the thumb drag of the custom vertical scrollbar.
igscroll-vdrag-big

Classes applied to the thumb drag of the custom vertical scrollbar when it is in big form.
igscroll-vdrag-thin

Classes applied to the thumb drag of the custom vertical scrollbar when it is in thin form.
igscroll-vtrack

Classes applied to the track of the custom vertical scrollbar.

Ignite UI for jQuery | API Reference

ui.igScroll

Code Sample

Related Samples

Related Topics

Dependencies

Inherits