La biblioteca script.aculo.us es una biblioteca multinavegador que tiene como objetivo mejorar la interfaz de usuario de un sitio web. El módulo Sortable se puede usar para hacer que cualquier lista se pueda ordenar, lo que permite al usuario arrastrar cualquier elemento según el orden requerido.
La opción scrollSensitivity se usa para especificar el número de píxeles desde la parte inferior del contenedor de desplazamiento después de lo cual el elemento comenzará a desplazarse. Se especifica en píxeles.
Sintaxis:
{ scrollSensitivity: value }
Parámetros: esta opción tiene un solo valor como se mencionó anteriormente y se describe a continuación:
- valor: este es un valor entero que especifica el número de píxeles desde la parte inferior del contenedor de desplazamiento después del cual comienza el desplazamiento.
El siguiente ejemplo ilustra el uso de esta opción.
Ejemplo:
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA