Available in the OSS Version

Scroll - Configuration Options

This sample demonstrates the different runtime settable options that affect the igScroll's behavior and visualization.
CountFirstNameLastNameCountryAge
0DownsHolcombItaly35
1MckenzieCalderonUSA26
2HowellHawkinsCanada25
3SheppardNicholsonItaly49
4BettyeTrujilloCanada37
5JoyceVaughanUSA48
6JanineMunozUSA59
7BetsyShortUSA26
8TanishaHarringtonUSA31
9FrenchSullivanItaly37
10GomezSandovalItaly24
11EstesSotoCanada24
12NewmanMathewsItaly60
13PaulHarperUSA52
14SharpeBlairCanada41
15KirkDownsUSA58
16AbbyWheelerCanada42
17WalterRothCanada36
18PrattMannCanada40
19BlackwellRandallItaly20
20LindaSanchezUSA26
21NievesHamptonItaly27
22PruittPaceCanada25
23ByrdBaileyCanada20
24HardyTerryUSA45
25MillieBoydUSA28
26RosaMercerCanada25
27BlairLongCanada21
28WhitfieldCherryUSA38
29CathrynHuntUSA26
30MorrisStoutItaly41
31VeraRichardsonCanada32
32SheltonHendersonCanada53
33JimmieCainUSA45
34BryanBradshawCanada24
35DeckerKaneCanada29
36KeishaPhelpsCanada34
37WestFryeItaly40
38JoanneAguilarUSA19
39WilsonWyattCanada47
40ShawKimUSA22
41FannyParkerItaly37
42SerranoHensleyCanada33
43CurtisWatkinsItaly23
44EverettPayneCanada58
45GarrisonGambleCanada50
46BooneRodgersItaly28
47CamachoMoodyCanada40
48GwendolynStarkCanada45
49JennaChenUSA58
50DollyBerryUSA19
51MorrisonAyalaCanada52
52EricksonCurtisItaly36
53BaileyBenderUSA22
54BirdDunlapUSA50
55WilkinsRaymondCanada53
56RiversColeCanada26
57NanetteRobertsCanada29
58HilaryBurnettItaly45
59CarolRoseUSA42
60WilkinsonConnerUSA43
61MercadoLindsayItaly47
62DominguezLeCanada33
63TerryRomanCanada25
64HeadMarquezUSA33
65TravisByrdUSA57
66MoranRhodesCanada57
67HebertVelezCanada30
68WeissCraftCanada33
69LittleNashItaly54
70MerleGeorgeUSA25
71HahnCameronCanada40
72MitziMaddoxItaly34
73PrestonHernandezCanada44
74RhodaOliverCanada34
75AugustaWigginsCanada32
76EloiseWhitleyItaly29
77GainesFrancisItaly31
78GonzalesPenningtonItaly47
79CorneliaStantonCanada24
80HowardBookerCanada41
81InaFletcherItaly43
82HenryBernardCanada48
83TamraWolfeCanada22
84SherryLeonCanada44
85BaldwinCookeCanada43
86WeberJuarezItaly46
87FowlerWareItaly27
88EvansNielsenCanada23
89OdonnellShermanUSA49
90MayoHarveyCanada54
91BullockLottCanada47
92EulaMiddletonUSA44
93MaritzaMcknightCanada21
94SawyerNguyenItaly57
95DeirdreHolmesCanada30
96JenningsAndrewsCanada41
97DebbieCoxCanada32
98BoyerWebsterItaly22
99OlaCarsonUSA54
Number of records: 100
Number of columns: 5
Scroll behavior options - mobile
px
Scroll behavior options - desktop
px
px
px
Scroll visualization options
Scroll position options

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
	<title></title>

	<!-- Ignite UI for jQuery Required Combined CSS Files -->
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/modules/infragistics.ui.scroll.css" rel="stylesheet" />

	<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

	<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

	<!--Sample JSON Data-->
	<script src="/data-files/employee-data-allDatatypes.js"></script>

	<style type="text/css">
		#scrollableContent {
			height: 400px;
			width: 100%;
			overflow: hidden;
			border: 1px solid #ccc;
		}

		#table-div {
			height: 400px;
			width: 600px;
			overflow: hidden;
		}

		#table-headers {
			height: 60px;
			width: 600px;
			overflow: hidden;
		}

		#table-main-headers {
			border: 1px solid #777777;
			height: 400px;
			width: 800px;
		}

		th {
			background-color: #888888;
			color: #ffffff;
			height: 30px;
		}

		fieldset.explorer {
			float: left;
			width: 44%;
		}

		fieldset.explorer > div {
			width:100%;
			padding-bottom:15px;

		}
		.currVal {
			display:inline !important;

		}
	</style>

</head>
<body>
	<div class="sampleContent">
		<div id="scrollableContent">
			<table style="height:500px;width: 800px; table-layout:fixed;" id="table-main">
				<colgroup></colgroup>
				<thead>
				</thead>
				<tbody></tbody>
			</table>
		</div>

		<fieldset id="rowNumber" class="explorer">
			<legend>Number of records: <span id="rowNum">100</span></legend>
			<div><div id="rowNumSlider" style="margin: 10px 5px 5px 10px; width: 200px;"></div></div>
		</fieldset>
		<fieldset id="colNumber" class="explorer">
			<legend>Number of columns: <span id="colNum">5</span></legend>
			<div><div id="colNumSlider" style="margin: 10px 5px 5px 10px; width: 200px;"></div></div>
		</fieldset>



		<fieldset id="behaviorOptionsMobile" class="explorer">
			<legend>Scroll behavior options - mobile</legend>
			<div><label for="inertiaDuration" style="display:inline"> Change inertia duration: </label><label class="currVal">1</label><div id="inertiaDuration" style="margin: 10px 5px 5px 10px; width: 200px;"></div> </div>
			<div><label for="inertiaStep" style="display:inline"> Change inertia step: </label><label class="currVal">1</label><div id="inertiaStep" style="margin: 10px 5px 5px 10px; width: 200px;"></div> </div>
			<div><label for="swipeToleranceX" style="display:inline"> Change horizontal swipe tolerance when scrolling vertically: </label><label class="currVal">30</label>px<div id="swipeToleranceX" style="margin: 10px 5px 5px 10px; width: 200px;"></div> </div>
		</fieldset>


		<fieldset id="behaviorOptionsDesktop" class="explorer">
			<legend>Scroll behavior options - desktop</legend>
			<div><input type="checkbox" id="smoothing" /><label for="smoothing" style="display:inline"> Enable smooth scrolling</label></div>
			<div style="display:none;"><label for="smoothingDuration" style="display:inline"> Change smoothing animation duration:</label><label class="currVal">1</label><div id="smoothingDuration" style="margin: 10px 5px 5px 10px; width: 200px;"></div> </div>
			<div style="display:none;"><label for="smoothingStep" style="display:inline"> Change smoothing step: </label><label class="currVal">1</label><div id="smoothingStep" style="margin: 10px 5px 5px 10px; width: 200px;"></div> </div>
			<div><label for="wheelStep" style="display:inline"> Change wheel step: </label><label class="currVal">50</label>px<div id="wheelStep" style="margin: 10px 5px 5px 10px; width: 200px;"></div> </div>
			<div><label for="smallIncrementStep" style="display:inline"> Change scrollbar arrow step: </label><label class="currVal">40</label>px<div id="smallIncrementStep" style="margin: 10px 5px 5px 10px; width: 200px;"></div> </div>
			<div><label for="bigIncrementStep" style="display:inline"> Change track area scroll step: </label><label class="currVal">100</label>px<div id="bigIncrementStep" style="margin: 10px 5px 5px 10px; width: 200px;"></div> </div>

		</fieldset>

		<fieldset id="visualizationOptions" class="explorer">
			<legend>Scroll visualization options</legend>
			<div><input type="checkbox" id="alwaysVisible" /><label for="alwaysVisible" style="display:inline"> Always display scrollbars</label></div>
			<div>
				<select id="scrollbarType" style="width:150px; height:20px;">
					<option>custom</option>
					<option>native</option>
					<option>none</option>
				</select>
				<label for="scrollbarType" style="display:inline"> Change scrollbar type </label>
			</div>
		</fieldset>

		<fieldset id="postionOptions" class="explorer">
			<legend>Scroll position options</legend>
			<div><label for="scrollTop"> Set scroll top position to: </label><input id="scrollTop" type="text" value="0" style="height:22px;" /><button id="scrTopApply">Apply</button></div>
			<div><label for="scrollLeft"> Set scroll left position to: </label><input id="scrollLeft" type="text" value="0" style="height:22px;" /><button id="scrLeftApply">Apply</button></div>
		</fieldset>

		<div style="clear: both;"></div>
	</div>
		<script>

			$(function () {

				//igScroll initialization
				$("#scrollableContent").igScroll({
					bigIncrementStep: 100
				});


				generateTableContent(100, 5);


				$("#rowNumSlider").slider({
					change: function (event, ui) {
						$("#rowNum").text(ui.value);
						generateTableContent(ui.value, $("#colNumSlider").slider("value"));
					},
					min: 25,
					max: 600,
					value: 100,
					step: 25
				});

				$("#colNumSlider").slider({
					change: function (event, ui) {
						$("#colNum").text(ui.value);
						generateTableContent($("#rowNumSlider").slider("value"), ui.value);
					},
					min: 1,
					max: 10,
					value: 5,
					step: 1
				})

				$("#alwaysVisible").change(function () {
					$("#scrollableContent").igScroll("option", "alwaysVisible", $(this).is(':checked'));
				});

				$("#scrollbarType").change(function () {
					$("#scrollableContent").igScroll("option", "scrollbarType", $(this).val());
				});

				$("#smoothingDuration").slider({
					change: function (event, ui) {
						$(this).parent().find("label.currVal").text(ui.value);
						$("#scrollableContent").igScroll("option", "smoothingDuration", ui.value);
					},
					min: 1,
					max: 5,
					value: 1,
					step: 1
				});

				$("#smoothingStep").slider({
					change: function (event, ui) {
						$(this).parent().find("label.currVal").text(ui.value);
						$("#scrollableContent").igScroll("option", "smoothingStep", ui.value);
					},
					min: 1,
					max: 5,
					value: 1,
					step: 1
				});

				$("#wheelStep").slider({
					change: function (event, ui) {
						$(this).parent().find("label.currVal").text(ui.value);
						$("#scrollableContent").igScroll("option", "wheelStep", ui.value);
					},
					min: 50,
					max: 500,
					value: 50,
					step: 50
				});

				$("#inertiaDuration").slider({
					change: function (event, ui) {
						$(this).parent().find("label.currVal").text(ui.value);
						$("#scrollableContent").igScroll("option", "inertiaDuration", ui.value);
					},
					min: 0,
					max: 5,
					value: 1,
					step: 1
				});

				$("#inertiaStep").slider({
					change: function (event, ui) {
						$(this).parent().find("label.currVal").text(ui.value);
						$("#scrollableContent").igScroll("option", "inertiaStep", ui.value);
					},
					min: 0,
					max: 5,
					value: 1,
					step: 1
				});

				$("#smallIncrementStep").slider({
					change: function (event, ui) {
						$(this).parent().find("label.currVal").text(ui.value);
						$("#scrollableContent").igScroll("option", "smallIncrementStep", ui.value);
					},
					min: 25,
					max: 500,
					value: 25,
					step: 25
				});

				$("#bigIncrementStep").slider({
					change: function (event, ui) {
						$(this).parent().find("label.currVal").text(ui.value);
						$("#scrollableContent").igScroll("option", "bigIncrementStep", ui.value);
					},
					min: 100,
					max: 1000,
					value: 100,
					step: 100
				});

				$("#smoothing").change(function () {
					$("#scrollableContent").igScroll("option", "smoothing", $(this).is(':checked'));

					if (!$(this).is(':checked')) {
						$("#smoothingDuration").parent().hide();
						$("#smoothingStep").parent().hide();
					} else {
						$("#smoothingDuration").parent().show();
						$("#smoothingStep").parent().show();
					}
				});

				$("#scrTopApply").igButton();
				$("#scrLeftApply").igButton();

				$("#scrTopApply").click(function () {
					$("#scrollableContent").igScroll("option", "scrollTop", parseInt($("#scrollTop").val()));
				});

				$("#scrLeftApply").click(function () {
					$("#scrollableContent").igScroll("option", "scrollLeft", parseInt($("#scrollLeft").val()));
				});

				$("#swipeToleranceX").slider({
					change: function (event, ui) {
						$(this).parent().find("label.currVal").text(ui.value);
						$("#scrollableContent").igScroll("option", "swipeToleranceX", ui.value);
					},
					min: 0,
					max: 180,
					value: 30,
					step: 30
				});

				//helper functions
				function generateTableContent(rowCount, colCount) {
					var allCols = ["Count", "FirstName", "LastName", "Country", "Age", "RegistererDate", "IsActive", "EmployeeID", "Col1", "Col2"]
					var data = employees.slice(0, rowCount);

					$("#table-main > tbody").empty();
					var content = "";
					for (var i = 0; i < data.length; i++) {
						var rec = data[i];
						content += "<tr>"
						for (var j = 0; j < colCount; j++) {
							var col = allCols[j];
							if (col === "Count") {
								content += "<td>" + i + "</td>";
							} else {
								var text = rec[col] !== undefined ? rec[col] : "";
								content += "<td>" + text + "</td>";
							}
						}
						content += "</tr>"
						//content += "<tr> <td>" + i + "</td> <td>" + data[i].FirstName + "</td> <td>" + data[i].LastName +
						//	"</td> <td>" + data[i].Country + "</td> <td>" + data[i].Age + "</td> <td>" + data[i].RegistererDate + "</td> <td>" + data[i].IsActive + "</td></tr>"
					}

					$("#table-main > thead").empty();
					$("#table-main > colgroup").empty();
					var headers = "<tr>";
					var colGroups = "";
					for (var i = 0; i < colCount; i++) {
						headers += "<th style='width:200px;'>" + allCols[i] + "</th>";
						colGroups += "<col style='width:200px;'>"
					}
					headers += "</tr>"

					$("#table-main > colgroup").html(colGroups);
					$("#table-main > thead").html(headers);
					$("#table-main > tbody").html(content);


					$("#scrollableContent").igScroll("option", "scrollHeight", $("#table-main").height());
					$("#scrollableContent").igScroll("option", "scrollWidth", $("#table-main").width());
				}
			});
		</script>

</body>
</html>