8
votes

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

Je crée une barre de défilement graphique afin que je dois 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 doit défiler?

Quelle est la formule de calcul de la hauteur de la barre de défilement en fonction de la quantité de contenu caché? Est-il logarithimique ou exponentiel ou simplement sur la base du pourcentage de contenu visible VS contenu caché?

Ce sont mes variables d'entrée:

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

    C'est ce que je veux calculer:

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

0 commentaires

3 Réponses :


9
votes

C'est généralement un pourcentage.

E.g. Si la zone visible est de 99% de la surface complète, la barre de défilement est de 99% de la hauteur.

De même si le visible est 50% de la surface complète, la barre de défilement est de 50% de la hauteur.

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

Ainsi, si vous avez une hauteur visible de 500PX, et que vous contentez de 50 000px, même si devrait faire une hauteur de la vis à pouce de (1% de 500PX = 5PX) ... Utilisez le minimum par défaut à la place (par exemple 20px)


2 commentaires

Comment peut relier le mouvement en% !? Comme si je déplace la barre de défilement de 5px vers le bas, combien dois-je déplacer le top de Div ?!


En faisant la même règle de trois que vous utilisez pour calculer la hauteur, juste vice versa.



0
votes

J'utiliserais Procent. Donc, si la zone visible est de 45% de la hauteur du contenu. La hauteur de la barre de défilement serait de 45% de la hauteur de la barre de défilement maximale. Cela se sent bien pour le début. Donc, si vous voyez la barre de défilement dans le haut, vous savez que c'est autour de double contenu.

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


0 commentaires

0
votes

Je pense que la formule linéaire fera très bien. Supposant que la hauteur de la barre de défilement maximale soit identique à la hauteur de la zone max 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


0 commentaires