Skip to content
Related Articles

Related Articles

script.aculo.us Sorting scrollSensitivity Option
  • Last Updated : 25 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 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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :