javascript - 如何计算调用 $( '#el' ' ).scrollTop( 1 ) 遍历 div 高度 759 的次数？

Question

更新:
我创建了这个 Code Page demo显示我在说什么。这个演示展示了两种方法，第一种是蛮力法，第二种是罗伯特·麦基的方法。

第一种方法，按滚动到结尾按钮导出垂直 (y) 缩放值，然后显示在刚刚按下的按钮旁边。按钮下方的值列表，您还将看到完全滚动到滚动区域左下角所需的 1px 水平和垂直滚动数，如 所示滚动 Y 计数 和 滚动 X 计数 字段。现在显示缩放值并选中相邻的复选框，按滚动到结尾按钮显示相同数量的 1px 水平和缩放的垂直滚动现在到达滚动区域的右下端。

第二种方法，按计算 Y 比例 按钮来计算 y 比例值，而无需实际滚动。计算出该值后，会滚动第二次潜水以显示它有效。

第一种方法找到一个允许滚动的 y 比例值，以便水平和垂直滚动上下滚动，以使它们都以完全相同的滚动次数到达左侧和底部。我不确定为什么会有差异，但第二种方法非常接近，只有一个滚动不同，所以它已经足够好了。

原始问题:

我需要计算滚动一个div的水平和垂直滚动条所需的缩放值，这样当水平滚动完全遍历div的宽度时，垂直滚动也完全遍历同一个div的高度。

我现在通过首先手动计算 $( '#div' ).scrollLeft( ++x ) 的调用次数来做到这一点。 jQuery 函数，以及 $( '#div' ).scrollTop( ++y ) 的调用次数函数，x 和 y 值从 0 开始，每次调用增加 1，分别需要滚动 div 的宽度和高度。在我的情况下，div 是 540 px 宽 759 px 高，它需要 342 覆盖宽度和 的次数660 为高度。由此我可以计算 y 缩放值以放入垂直滚动函数调用中，$( '#div' ).scrollTop( ++y * yScale ) ，对于我的 div 来说是 660/342。问题是 div 的宽度和高度并不总是相同，因此我不能为滚动 div 需要显示的所有可能内容使用预先计算的 y 缩放值。

为什么对于我的具体情况，每次滚动调用的数量不是 540 和 759 而不是 342 和 660，而是 1 像素 x 和 y 增量？

在尝试自动计算之前，我尝试多次调用 scrollTop 函数，参数值从 0 开始，并在每次连续调用中递增 1 个像素 (0、1、2、... 10、11、..、20 等) ，我发现每次滚动调用滚动的量并不一致。

我将其包括在内是因为由于不一致，我发现我不能依靠几次滚动调用的平均滚动量来计算遍历每个 div 轴方向的完整距离所需的调用总数。

我可以通过一个循环来自动执行此操作，该循环计算每个维度的重复调用次数，当相应的滚动条停止滚动时停止每个方向的计数，并在两个滚动条停止滚动时停止循环，但我宁愿不必这样做如果有一种纯粹的数学方法来计算缩放值。此外，这对用户来说看起来很奇怪，因为每次加载 div 内容时都会跳来跳去，尤其是对于较大的内容并减慢显示速度。

有谁知道如何做到这一点？

谢谢。

Answer 1

如果您尝试计算 yScaling，请执行以下操作:

var elem = $('#div2a').parent()[0]; // same as divScroller[0]
var yScaling = (elem.scrollHeight-elem.clientHeight) / (elem.scrollWidth-elem.clientWidth);

对于您的 div，结果为 1.9298245614035088。

如果您想要在“Ave Scroll Y”和“Ave Scroll X”中尝试计算的值，那么这些值是 1 和 1/1.9298245614035088，即 0.5181818181818182。

这就是公式有效的原​​因:
假设您有一个宽度为 100 像素的视口(viewport)，并且该视口(viewport)内的内容为 400 像素。当完全向左滚动时，scrollLeft 将为 300px (400px - 100px)。 400px 中的 300px 将离开屏幕，最后 100px 将在视口(viewport)内可见。这就是为什么当您尝试计算scrollLeft 的最大值时，您使用scrollWidth - 视口(viewport)的clientWidth (.scroller)。做同样的事情来计算最大滚动顶部，Y-Scaling 是这两个数字之间的比率。