Barras de desplazamiento

Ahora, aprenderemos a añadir barras de desplazamiento en una ventana.

Añadir barras de desplazamiento

Una barra de desplazamiento sirve para que un usuario pueda moverse en un documento grande. También puedes usarla cuando tienes que buscar un valor que está dentro de un cierto rango. Las barras de desplazamiento pueden crearse de varias formas. En XUL, puede crearse una usando la etiqueta scrollbar. Algunos elementos, como cajas de texto, también añadirán barras de desplazamiento cuando el contenido de dentro es demasiado grande

En esta sección, hablaremos de la creación de una barra de desplazamiento independiente. El usuario pondrá el valor ajustando la barra de desplazamiento. Probablemente no usarás esto a menudo. Una barra de desplazamiento está compuesta de varias partes: el deslizador, que es la parte principal de la barra de desplazamiento con la caja ajustable, y los dos botones de flecha. Una barra de desplazamiento crea todos estos elementos automáticamente.

La sintaxis de una barra de desplazamiento es la siguiente:

<scrollbar
    id="barrahori"
    orient="horizontal"
    curpos="50"
    maxpos="400"
    increment="2"
    pageincrement="10"/>

Los atributos son los siguientes:

id id

El identificador único de la barra de desplazamiento

orient orient

Especifica la dirección de la barra de desplazamiento. Por defecto es horizontal, que crea una barra de desplazamiento que se extiende de izquierda a derecha. También puedes especificar vertical que crea una barra de desplazamiento que se extiende de arriba abajo.

curpos curpos

Indica la posición actual de la barra de desplazamiento (la caja que puedes deslizar hacia adelante y hacia atrás.) El rango de valores se extiende de 0 al valor de maxpos. Este valor no es necesario. El valor por defecto es 0.

maxpos maxpos

Indica la posición máxima de la barra de desplazamiento. Es un valor numérico. El valor por defecto es 100.

increment increment

Este valor especifica cuánto cambia el valor de curpos cuando el usuario pulsa sobre una de las flechas de barra de desplazamiento. El valor por defecto es 1.

pageincrement pageincrement

Este valor especifica cuánto cambia el valor curpos cuando el usuario hace clic sobre las páginas con la barra de desplazamiento, que puede hacerse pulsando sobre la bandeja entre la caja y las flechas. El valor por defecto es 10.

El ejemplo dado en la sintaxis anterior creará una barra de desplazamiento que puede extenderse de un valor de 0 a 100. El valor 100 podría ser el número de líneas en una lista, pero podría ser lo que quieras. El valor inicial en este ejemplo es 20. Al hacer clic sobre una de las flechas de barra de desplazamiento, el valor se cambiará por 1 encima de o abajo. Pero paginando por la barra de desplazamiento, el valor se cambiará por 10.

Cuando el usuario haga clic sobre las flechas de la barra de desplazamiento, se moverá la cantidad especificada por el valor increment. El aumento del valor de este atributo hará que la barra de desplazamiento se mueva más lejos con cada clic. La posición más a la izquierda o superior de la barra de desplazamiento tiene el valor 0 y la posición más a la derecha o inferior de la barra de desplazamiento tiene el valor dado por maxpos.

Ajustando los valores de la barra de desplazamiento, puedes tener el thumb posicionado donde quieras y el cambio cuando el usuario haga clic en las flechas tal y como desees.

A continuación, aprenderemos a crear barras de herramientas.