滚动条内容步长公式答案

【问题标题】：Formula for content step of scrollbar滚动条内容步长公式
【发布时间】：2016-01-11 05:28:51
【问题描述】：

如下图所示：

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

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

这里的公式是什么？

【问题讨论】：

标签： user-interface scrollbar formula rectangles

【解决方案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

【讨论】：

很高兴有人挖掘了我这个几乎被埋没的帖子，没有人注意。我离开这个 GUI 项目一段时间，因为我被这个问题困住了，我找不到一个讨论这种话题的网站，但是我在过去的一个月里做一个 webdev，我学到了很多关于他们的 UI，希望在那之后，我又回到了兴奋中。谢谢你的回答：D ..也许我会在我重新集中注意力后继续这个项目。
非常感谢您的赞赏！！请让我知道您将来可能需要任何帮助。
试图关注这个，arrowHeight 是什么？
arrowHeight 是一个用户可以通过单击滚动条的顶部和底部箭头向上或向下滚动的地方。这仅适用于桌面浏览器，因为在移动设备中我们没有向上或向下滚动的图标....

【解决方案2】：

我尝试使用您在 VB.net 中提供的公式，但它不起作用。拇指在滚动条末端停止。滚动条和可视区域都是 490px，内容高度是内容项的数量 (ChAm) 乘以 50 再加上 40。

 Dim contentHeight As Integer = ChAm * 50 + 40
 Dim scrollBarArea As Integer = 490
 Dim viewableRatio As Double = scrollBarArea / contentHeight
 Dim thumbHeight As Double = scrollBarArea * viewableRatio
 Dim scrollTrackSpace As Integer = contentHeight - scrollBarArea
 Dim scrollThumbSpace As Double = scrollBarArea - thumbHeight
 Dim scrollJump As Double = scrollTrackSpace / scrollThumbSpace

【讨论】：