Calculer la hauteur de la barre de défilement en fonction de la quantité de contenu masqué

Question

Je crée une barre de défilement graphique. J'ai donc besoin de calculer manuellement la hauteur de la barre de défilement. Vous savez comment dans la plupart des applications la hauteur de la barre de défilement change en fonction de combien il faut faire défiler?

Quelle est la formule pour calculer la hauteur de la barre de défilement en fonction de la quantité de contenu caché? Est-il logarithmique ou exponentiel ou simplement basé sur le pourcentage de contenu visible par rapport au contenu caché?

Ce sont mes variables d'entrée:

• Zone visible - par exemple. 100 px
• Hauteur du contenu - par ex. 1000 px
• Hauteur maximale de la barre de défilement - par ex. 500 px

Voici ce que je veux calculer:

• hauteur de la barre de défilement - par exemple. 50 px ??

Answer 1

Il s'agit généralement d'un pourcentage.

E.g. Si la zone visible est à 99% de la zone entière, la barre de défilement est à 99% de la hauteur.

De même, si le visible est de 50% de la superficie totale, la barre de défilement est de 50% de la hauteur.

Assurez-vous de faire la taille minimum quelque chose de raisonnable (par exemple au moins 18-20px)

Ainsi, si vous avez une hauteur de 500px et le contenu des 50,000px visibles même si elle doit faire un pouce hauteur de la vis de (1% de 500px = 5px) ... utiliser le minimum par défaut à la place (par exemple 20px)

Answer 2

Je voudrais utiliser procent. Donc, si la zone visible est 45% de la hauteur du contenu. La hauteur de la barre de défilement serait de 45% de la hauteur maximale de la barre de défilement. Cela semble juste pour le début. Donc, si vous voyez la barre de défilement dans le haut, vous savez qu'il y a environ deux fois plus de contenu.

Mais je pense que vous avez besoin d'une limite inférieure sur la taille de la barre de défilement pour que l'utilisateur puisse cliquer dessus.

Answer 3

Je pense que la formule linéaire fera très bien. En supposant que la hauteur maximale de la barre de défilement est la même que la hauteur maximale de la zone visible, le pseudocode serait comme ceci:

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