Calculando el tamaño de los scroll.

Muy seguido vemos efectos tipo scroll, ya sabes, los que tiene una barrita para subir y bajar el contenido

EL problema que he visto con muchos de ellos es que sin importar cuanto contendido haya en ese scroll, la barra siempre queda del mismo tamaño, eso no nos da nada de información en cuanto al contenido que ha quedado “escondido” como sucede con los verdaderos scroll del navegador. Por ejemplo, si entras a una pagina con una mini barrita de scroll, entonces al instante sabes que el contenido es, oh God, para que te cuento (eso quiere decir, muy largo, por quien no entienda la forma en que hablamos los Mexicanos).

Seguramente la razón de esto es por que no sabemos como calcular el tamaño correcto de la barra de scroll. Hace un tiempo descubrí que ese tamaño es relativo a las veces que el tamaño de la ventana cabe dentro del tamaño del contenido. Es decir que, si tienes un contenido que es en total 1000px de alto, y una ventana de 500px de alto, la ventana cabe dos veces en el contenido, por lo que el scroll debe caber dos veces en la ventana. Probablemente una imagen te ayude a entender mejor el concepto:

barrascroll

De modo que para poder calcular el tamaño del scroll, bastará con aplicar la siguiente formula:

S = (c/C)c

En donde:

S es el valor que queremos obtener (la medida del scroll)
C es la altura del contenido
c es la altura del contenedor.

Entonces si tuviéramos un contenido de 1000px de altura dentro de un contenedor de 500px de altura, la substitución de la formula por los valores sería la siguiente:

S = ( 500 / 1000)500;

Lo que nos da como resultado:
S = (0.5) 500

S = 250;

Y esto reflejaría exactamente la cantidad de contenido que hay ‘oculto’ en el scroll de modo que el usuario pueda hacer un calculo visual, cosa que hacemos sin darnos cuenta.

Por que es importante el tamaño de la barra de scroll? Porque esta le da una especie de feedback al usuario mediante el cual se puede dar cuenta de cuanto contenido hay oculto. Pero hay otras razones. Por ejemplo, cuando tenemos un contenido que es un 120% el tamaño del contenedor, es decir que 20% de la información queda oculta, pero nuestra barra de scroll es demasiado pequeña, al moverse esta barra, el contenido parecerá que sigue siendo estático, por el contrario, si el contenido oculto es demasiado y la barra de scroll es demasiado grande, al moverla un poquito, el contenido se moverá demasiado haciendo la barra prácticamente incontrolable.

3 thoughts on “Calculando el tamaño de los scroll.

  1. Interesante el tip, intento aplicarlo, pero no me queda claro como obtener el tamaño del contenido, tengo un textarea, que pues se transforma en un texto enriquecido con un plug-in, pero necesito saber su tamaño y no he logrado obtener el tamaño del contenido😄, conoces alguna forma?? gracias

Comments are closed.