滚动条内容步长公式

如下图所示：

找出content step值正比于thumb height and thumb step.

content step是通过垂直位置的像素滚动量。

这里的公式可能是什么？

拇指高度的计算公式

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 个像素。

有关完整详细信息，请参阅此线程：-完整的滚动公式 https://stackoverflow.com/questions/16366795/how-to-calculate-the-size-of-scroll-bar-thumb/22710156#22710156