Ignite UI™ API Documentation

ui.igScroll

Overview
Options
Events
Methods
Theming

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);

language
Inherited

Type:: string
Default:: "en"

Set/Get the locale language setting for the widget.

Code Sample

 
					//Initialize
				$(".selector").igScroll({
					language: "ja"
				});

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

				// Set
				$(".selector").igScroll("option", "language", "ja");

locale
Inherited

Type:: object
Default:: null

Set/Get the locale setting for the widget.

Code Sample

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

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

				// Set
				$(".selector").igScroll("option", "locale", {});

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");

regional
Inherited

Type:: enumeration
Default:: en-US

Set/Get the regional setting for the widget.

Code Sample

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

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) {...}
				});
			 
```
resized

Cancellable:

false

Event which is raised after the igScroll has finished resizing.
Function takes arguments evt and args.
Use evt.originalEvent (with validation for not null of evt) to obtain reference to event of browser.
Use args.owner to obtain reference to igScroll.
Code Sample
```
 
				//Delegate
				$(document).delegate(".selector", "igscrollresized", function (evt, args) {
					//return reference to igScroll
					args.owner;
				});

				//Initialize
				$(".selector").igScroll({
					resized: function(evt, args) {...}
				});
			 
```
resizing

Cancellable:

true

Event which is raised when the igScroll detects that the element is reizing.
Function takes arguments evt and args.
Use evt.originalEvent (with validation for not null of evt) to obtain reference to event of browser.
Use args.owner to obtain reference to igScroll.
Code Sample
```
 
				//Delegate
				$(document).delegate(".selector", "igscrollresizing", function (evt, args) {
					//return reference to igScroll
					args.owner;
				});

				//Initialize
				$(".selector").igScroll({
					resizing: 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

changeGlobalLanguage
Inherited

.igScroll( "changeGlobalLanguage" );
Changes the widget language to global language. Global language is the value in $.ig.util.language.
Code Sample
```
 
				$(".selector").igScroll("changeGlobalLanguage");
			 
```
changeGlobalRegional
Inherited

.igScroll( "changeGlobalRegional" );
Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.
Code Sample
```
 
				$(".selector").igScroll("changeGlobalRegional");
			 
```
changeLocale

.igScroll( "changeLocale" );
This method overrides the base method and does nothing, because the scoll container shouldn't change the container locales
Note that this method is for rare scenarios, use language or locale option setter.
Code Sample
```
 
				$(".selector").igScroll("changeLocale");
			 
```

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-harrow-hidden

Classes applied to the arrows of the custom horizontal scrollbar when it is hidden.
igscroll-leftarrow

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

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

Classes applied to the Arrow Right of the custom horizontal scrollbar when the vertical scrollbar is not visible.
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-hidden

Classes applied to the thumb drag of the custom horizontal scrollbar when it is hidden but previously was visible the thin.
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-htrack-single

Classes applied to the track of the custom horizontal scrollbar when no vertical scrollbar is displayed.
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-hnative-outer-single

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

Classes applied to the fill element that cover the area between the scrollbars.
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-vnative-outer-single

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-hsynced-content

Classes applied to an element that wraps the content of horizontally linked element.
igscroll-vsynced-content

Classes applied to an element that wraps the content of vertically linked element.
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-single

Classes applied to the Arrow Down of the custom vertical scrollbar when the horizontal scrollbar is not visible.
igscroll-varrow-hidden

Classes applied to the arrows of the custom vertical scrollbar when it is hidden.
igscroll-uparrow

Classes applied to the Arrow Up of the custom vertical scrollbar.
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-hidden

Classes applied to the thumb drag of the custom vertical scrollbar when it is hidden but previously was visible the thin.
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.
igscroll-vtrack-single

Classes applied to the track of the custom vertical scrollbar when no horizontal scrollbar is displayed.

Ignite UI | Samples

ui.igScroll

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

alwaysVisible

Code Sample

bigIncrementStep

Code Sample

inertiaDeltaX

Code Sample

inertiaDeltaY

Code Sample

inertiaDuration

Code Sample

inertiaStep

Code Sample

languageInherited

Code Sample

localeInherited

Code Sample

modifyDOM

Code Sample

regionalInherited

Code Sample

scrollbarH

Code Sample

scrollbarHParent

Code Sample

scrollbarType

Members

Code Sample

scrollbarV

Code Sample

scrollbarVParent

Code Sample

scrollHeight

Code Sample

scrollLeft

Code Sample

scrollOnlyHBar

Code Sample

scrollOnlyVBar

Code Sample

scrollTop

Code Sample

scrollWidth

Code Sample

smallIncrementStep

Code Sample

smoothing

Code Sample

smoothingDuration

Code Sample

smoothingStep

Code Sample

swipeToleranceX

Code Sample

syncedElemsH

Code Sample

syncedElemsV

Code Sample

wheelStep

Code Sample

rendered

Code Sample

resized

Code Sample

resizing

Code Sample

scrolled

Code Sample

scrolling

Code Sample

thumbDragEnd

Code Sample

thumbDragMove

Code Sample

language
Inherited

locale
Inherited

regional
Inherited

changeGlobalLanguage
Inherited

changeGlobalRegional
Inherited