ui.igScroll

ui.igScroll_image

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

jquery-1.9.1.js
jquery.ui-1.9.0.js
jquery.ui.widget.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.ui.widget.js

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

  • 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", {});

  • minThumbSize

    Type:
    enumeration
    Default:
    15

    Sets or gets the minimum size of the thumb drag in pixels. For the vertical thumb it means its minimum height, for the horizontal thumb it means its minimum width. This affects only the custom scrollblar when scrollbarType is set to "custom".

    Code Sample

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

  • 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.

        • originalEvent
          Type: Event

          Gets a reference to event of the browser (with validation for not null of evt).

    • args
      Type: Object

        • owner
          Type: Event

          Gets a reference to the igScroll.

    Code Sample

     
				//Bind after initialization
				$(document).on("igscrollrendered", ".selector", 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

     
				//Bind after initialization
				$(document).on("igscrollresized", ".selector", 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

     
				//Bind after initialization
				$(document).on("igscrollresizing", ".selector", 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.

        • originalEvent
          Type: Event

          Gets a reference to event of the browser (with validation for not null of evt).

    • args
      Type: Object

        • owner
          Type: Object

          Gets a reference to the igScroll.

        • smallIncrement
          Type: Number

          Gets if the content is scrolled by the arrows. 0 - none used, -1 - Arrow Up/Left, 1 - Arrow Down/Right.

        • bigIncrement
          Type: Number

          Gets if the content is scrolled by the scrollbar track areas. 0 - none used, -1 - Scrolled Up/Left, 1 - Scrolled Down/Right.

        • horizontal
          Type: Bool

          Gets which axis is being used to scroll - horizontal(true) or vertical(false).

    Code Sample

     
				//Bind after initialization
				$(document).on("igscrollscrolled", ".selector", 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.

        • originalEvent
          Type: Event

          Gets a reference to event of the browser (with validation for not null of evt).

    • args
      Type: Object

        • owner
          Type: Object

          Gets a reference to the igScroll.

        • smallIncrement
          Type: Number

          Gets if the content is scrolled by the arrows. 0 - none used, -1 - Arrow Up/Left, 1 - Arrow Down/Right.

        • bigIncrement
          Type: Number

          Gets if the content is scrolled by the scrollbar track areas. 0 - none used, -1 - Scrolled Up/Left, 1 - Scrolled Down/Right.

        • horizontal
          Type: Bool

          Gets which axis is being used to scroll - horizontal(true) or vertical(false).

        • stepX
          Type: Number

          Gets how much the content will be scrolled horizontally.

        • stepY
          Type: Number

          Gets how much the content will be scrolled vertically.

    Code Sample

     
				//Bind after initialization
				$(document).on("igscrollscrolling", ".selector", 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.

        • originalEvent
          Type: Event

          Gets a reference to event of the browser (with validation for not null of evt).

    • args
      Type: Object

        • owner
          Type: Object

          Gets a reference to the igScroll.

        • horizontal
          Type: Bool

          Gets which scrollbar thumb is being used - horizontal(true) or vertical(false).

    Code Sample

     
				//Bind after initialization
				$(document).on("igscrollthumbdragend", ".selector", 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.

        • originalEvent
          Type: Event

          Gets a reference to event of the browser (with validation for not null of evt).

    • args
      Type: Object

        • owner
          Type: Object

          Gets a reference to the igScroll.

        • horizontal
          Type: Bool

          Gets which scrollbar thumb is being used - horizontal(true) or vertical(false).

        • stepX
          Type: Number

          Gets how much the content will be scrolled horizontally.

        • stepY
          Type: Number

          Gets how much the content will be scrolled vertically.

    Code Sample

     
				//Bind after initialization
				$(document).on("igscrollthumbdragmove", ".selector", 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.

        • originalEvent
          Type: Event

          Gets a reference to event of the browser (with validation for not null of evt).

    • args
      Type: Object

        • owner
          Type: Object

          Gets a reference to the igScroll.

        • horizontal
          Type: Bool

          Gets which axis is being used to scroll - horizontal(true) or vertical(false).

    Code Sample

     
				//Bind after initialization
				$(document).on("igscrollthumbdragstart", ".selector", 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) {...}
				});

  • 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.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.