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>