滚动条内容步长公式

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；

拇指向下= 1px;

内容向上滚动= 2.666666666666667px;

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

有关完整的详细信息，请参阅此线程：-完整的滚动公式