The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Sortable module can be used to make any list sortable, allowing the user to drag any item according to the order required.
The scrollSpeed option is used to specify the increments by which the container would scroll when an item is moved outside the scroll container. It is specified in pixels. A higher value would mean that the container would scroll faster.
Syntax:
{ scrollSpeed: value }Parameters: This option has a single value as mentioned above and described below:
- value: This is an integer value that specifies the increments by which the scroll container would scroll, defaults to 15.
The below example illustrates the use of this option.
Example:
HTML
<!DOCTYPE html> <html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript" src="scriptaculous.js">
</script>
<style>
#scrollable1,
#scrollable2 {
overflow-x: scroll;
height: 120px;
width: 250px;
}
li {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
</div>
<strong>
script.aculo.us Sorting scrollSpeed Option
</strong>
<p>
The scrollSpeed of the second list
is greater than the first one.
</p>
<p>
This list has the scrollSpeed
set to 1
</p>
<div id="scrollable1">
<ul id="list1">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 7</li>
<li>Element 8</li>
<li>Element 9</li>
<li>Element 10</li>
</ul>
</div>
<p>
This list has the
scrollSpeed set to 150
</p>
<div id="scrollable2">
<ul id="list2">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 7</li>
<li>Element 8</li>
<li>Element 9</li>
<li>Element 10</li>
</ul>
</div>
<script type="text/javascript">
window.onload = function () {
Sortable.create("list1", {
// Define the container to scroll
scroll: 'scrollable1',
// Set the scroll speed
scrollSpeed: 1
});
Sortable.create("list2", {
// Define the container to scroll
scroll: 'scrollable2',
// Set the scroll speed
scrollSpeed: 150
});
};
</script>
</body>
</html>
|
Output: