滚动条内容步骤的公式

Question

如下图所示：

找到与content step和thumb height成比例的thumb step值。

content step是以像素为单位的垂直位置滚动量。

这里的公式可能是什么？

Answer 1

计算拇指高度的公式

var arrowHeight = 25;
var viewportHeight = 200;
var contentHeight = 600;

var viewableRatio = viewportHeight / contentHeight; // 1/3 or 0.333333333n
var scrollBarArea = viewportHeight - arrowHeight * 2; // 150px
var thumbHeight = scrollBarArea * viewableRatio; // 50px

计算滚动条内容步骤的公式

var scrollTrackSpace = self.contentHeight - self.viewportHeight; // (600 - 200) = 400 
var scrollThumbSpace =  self.viewportHeight - self.thumbHeight; // (200 - 50) = 150
var scrollJump = scrollTrackSpace / scrollThumbSpace; //  (400 / 150 ) = 2.666666666666667

<强>最后： -

拇指高度 = 50px;

Thumb Step Down = 1px;

内容向上滚动 = 2.666666666666667px;

如果你向下跳1个像素拇指，那么你的内容应该向上滚动2.666666666666667像素。

有关完整的详细信息，请参阅此主题： - Complete Scrolling Formula

Answer 2

我尝试使用您在VB.net中提供的公式，但它无法正常工作。拇指在滚动条末端之前停止。滚动条和可查看区域均为490px，内容高度为内容项（ChAm）乘以50加40。

 session.createQuery("from Country c where c.countryName=:countryname order by c.countryName");