Skip to content
Related Articles

Related Articles

Improve Article

script.aculo.us Sorting scrollSpeed Option

  • Last Updated : 28 Dec, 2020

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :