Calcular la altura de la barra de desplazamiento según la cantidad de contenido oculto

Question

Estoy creando una barra de desplazamiento gráfica, así que necesito calcular la altura de la barra de desplazamiento manualmente. ¿Sabes cómo en la mayoría de las aplicaciones la altura de la barra de desplazamiento cambia en función de cuánto desplazarse?

¿Cuál es la fórmula para calcular la altura de la barra de desplazamiento en función de la cantidad de contenido oculto? ¿Es logarítmico o exponencial o simplemente se basa en el porcentaje de contenido visible frente a los contenidos ocultos?

Estos son mis variables de entrada:

• Área visible - por ejemplo. 100 px
• Altura del contenido, por ej. 1000 px
• Altura de barra de desplazamiento máxima, p. Ej. 500 px

Esto es lo que quiero para calcular:

• altura de la barra de desplazamiento - por ejemplo. 50 px ??

Answer 1

Por lo general, es un porcentaje.

E.g. si el área visible es el 99% del área total, la barra de desplazamiento es el 99% de la altura.

Del mismo modo, si el visible es el 50% del área total, la barra de desplazamiento tiene el 50% de la altura.

Sólo asegúrese de que el tamaño de algo mínimo razonable (por ejemplo, al menos 18-20px)

Por lo tanto, si usted tiene una altura visible de 500 píxeles, y el contenido de 50,000px a pesar de que debería hacer un pulgar altura del tornillo de (1% de 500px = 5px) ... utilice el mínimo predeterminado en su lugar (por ejemplo, 20px)

Answer 2

Yo usaría procent. Entonces, si el área visible es 45% de la altura del contenido. La altura de la barra de desplazamiento sería 45% de la altura máxima de la barra de desplazamiento. Esto se siente bien para el comienzo. Entonces, si ves la barra de desplazamiento en la parte superior, sabes que hay alrededor de doble contenido.

Pero creo que se necesita un límite inferior de cuán pequeña puede ser la barra de desplazamiento para que el usuario haga clic en ella.

Answer 3

Creo que la fórmula lineal funcionará bien. Suponiendo que la altura máxima de la barra de desplazamiento sea la misma que la altura máxima del área visible, el pseudocódigo sería así:

scrollbar_visible=true; 
if (content_height < visible_height) {scrollbar_visible = false; return;} // hide the scrollbar if there'se nothing to scroll 
scrollbar_height = visible_height/content_height; 
scrollbar_height = min(scrollbar_height, min_scrollbar_height); // don't let the scrollbar become smaller than some predefined size