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 scrollSpeed se usa para especificar los incrementos por los que el contenedor se desplazará cuando un elemento se mueva fuera del contenedor de desplazamiento. Se especifica en píxeles. Un valor más alto significaría que el contenedor se desplazaría más rápido.
Sintaxis:
{ scrollSpeed: 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 los incrementos por los que se desplazaría el contenedor de desplazamiento, el valor predeterminado es 15.
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: 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>
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