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
Related Topics
Dependencies
Inherits
-
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.
-
rendered
- Cancellable:
- false
Event which is raised after the scroller has been rendered fully.
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.
-
evtType: Event
JQuery event object.
-
originalEventType: Event
Gets a reference to event of the browser (with validation for not null of evt).
-
-
argsType: Object
-
ownerType: Object
Gets a reference to the igScroll.
-
smallIncrementType: Number
Gets if the content is scrolled by the arrows. 0 - none used, -1 - Arrow Up/Left, 1 - Arrow Down/Right.
-
bigIncrementType: Number
Gets if the content is scrolled by the scrollbar track areas. 0 - none used, -1 - Scrolled Up/Left, 1 - Scrolled Down/Right.
-
horizontalType: Bool
Gets which axis is being used to scroll - horizontal(true) or vertical(false).
-
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.-
evtType: Event
JQuery event object.
-
originalEventType: Event
Gets a reference to event of the browser (with validation for not null of evt).
-
-
argsType: Object
-
ownerType: Object
Gets a reference to the igScroll.
-
smallIncrementType: Number
Gets if the content is scrolled by the arrows. 0 - none used, -1 - Arrow Up/Left, 1 - Arrow Down/Right.
-
bigIncrementType: Number
Gets if the content is scrolled by the scrollbar track areas. 0 - none used, -1 - Scrolled Up/Left, 1 - Scrolled Down/Right.
-
horizontalType: Bool
Gets which axis is being used to scroll - horizontal(true) or vertical(false).
-
stepXType: Number
Gets how much the content will be scrolled horizontally.
-
stepYType: Number
Gets how much the content will be scrolled vertically.
-
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.
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.
-
evtType: Event
JQuery event object.
-
originalEventType: Event
Gets a reference to event of the browser (with validation for not null of evt).
-
-
argsType: Object
-
ownerType: Object
Gets a reference to the igScroll.
-
horizontalType: Bool
Gets which scrollbar thumb is being used - horizontal(true) or vertical(false).
-
stepXType: Number
Gets how much the content will be scrolled horizontally.
-
stepYType: Number
Gets how much the content will be scrolled vertically.
-
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.
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) {...} });
-
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-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-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-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.