Gizli içerik miktarına göre kaydırma çubuğu yüksekliğini hesaplayın

Question

Grafik kaydırma çubuğu oluşturuyorum, böylece kaydırma çubuğu yüksekliğini manuel olarak hesaplamam gerekiyor. Çoğu uygulamada kaydırma çubuğunun boyunun ne kadar kaydırılacağını değiştirdiğini biliyor musunuz?

Gizli içerik miktarına göre kaydırma çubuğu yüksekliğini hesaplamak için formül nedir? Logaritimik mi yoksa üstel mi, yoksa sadece içeriğe göre gizlenen içeriklerin yüzdesine göre mi açık?

Bunlar benim girdi değişkenleri şunlardır:

• Görünür alanı - örn. 100 px
• İçerik yüksekliği - örn. 1000 px
• Maksimum kaydırma çubuğu yüksekliği - örn. 500 px
Bu benim hesaplamak istediğim şey

:

• scrollbar yüksekliğini - örn. 50 px?

Answer 1

Bu genellikle bir yüzdedir.

E.g. Görünür alan tüm alanın% 99'uysa, kaydırma çubuğu yüksekliğin% 99'udur.

Benzer şekilde görünen alan tüm alanın% 50'siyse, kaydırma çubuğu yüksekliğin% 50'sidir.

Sadece makul minimum boyut şey yapmak emin olun (örneğin en az 18-20px) görünür bir 500px yüksekliğini ve bir başparmak yapmalıdır rağmen 50,000px içeriğini varsa Böylece

vida yüksekliği (500px = 5px'in% 1'i) ... yerine varsayılan asgari değeri kullanın (örn. 20px)

Answer 2

Procent kullanıyorum. Dolayısıyla görünür alan İçerik yüksekliğinin% 45'iyse. Kaydırma çubuğu yüksekliği, maksimum kaydırma çubuğu yüksekliğinin% 45'i olacaktır. Bu başlangıç ​​için doğru geliyor. Bu yüzden en üstteki kaydırma çubuğunu görürseniz, bunun iki katı daha fazla olduğunu bilirsiniz.

Ancak, Kullanıcı'nın tıklatması için kaydırma çubuğunun ne kadar küçük olabileceği konusunda biraz alt sınıra ihtiyacınız olduğunu düşünüyorum.

Answer 3

Doğrusal formülün iyi olacağını düşünüyorum. Maksimum kaydırma çubuğu yüksekliğinin maksimum görünür alan yüksekliği ile aynı olduğunu varsayarak, sözde kod şu şekilde olur:

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