script.aculo.us Sorting scrollSensitivity Option
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 scrollSensitivity option is used to specify the number of pixels from the bottom of the scroll container after which the element will start scrolling. It is specified in pixels.
Syntax:
{ scrollSensitivity: value }Parameters: This option has a single value as mentioned above and described below:
- value: This is an integer value that specifies the number of pixels from the bottom of the scroll container after which scrolling starts.
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: 100px; width: 250px; } </style></head> <body> <div> <h1 style="color: green"> GeeksforGeeks </h1> </div> <strong> script.aculo.us Sorting scrollSensitivity Option </strong> <p> The scrollSensitivity of the second list is greater than the first one. </p> <p> This list has the scrollSensitivity set to 10 </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 scrollSensitivity set to 80 </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 sensitivity scrollSensitivity: 10 }); Sortable.create("list2", { // Define the container to scroll scroll: 'scrollable2', // Set the scroll sensitivity scrollSensitivity: 80 }); }; </script></body> </html> |
Output:
Please Login to comment...