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

Question

更新： 我创建这个 Code Page demo 来展示我在说什么。这个demo展示了两种方法，第一种是蛮力法，第二种是Robert McKee的方法。

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

使用第二种方法，按计算Y 比例 按钮计算Y 比例值，无需实际滚动。计算值后，第二个 dive 滚动显示它有效。

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

原题：

我需要计算滚动 div 的水平和垂直滚动条所需的缩放值，以便当水平滚动完全穿过 div 的宽度时，垂直滚动也完全穿过 div 的宽度遍历高度相同div.

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

为什么 1 像素的 x 和 y 增量不是每个滚动调用的数量不是 540 和 759 而不是我的特定情况下的 342 和 660？

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

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

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

有人知道怎么做吗？

谢谢。

Answer 1

使用 currentScrollX 和 currentScrollY 设置滚动条的当前位置，使用 destinationScrollX 和 destinationScrollY 设置您想去的地方

然后每个动画循环运行以下以重新计算 currentScrollX 和 currentScrollY

var speed = 20; // adjust accordingly

// Home into destination
currentScrollX += (destinationScrollX - currentScrollX) / speed;
currentScrollY += (destinationScrollY - currentScrollY) / speed;

要结束滚动，只需执行类似

的操作

if (Math.abs(destinationScrollX - currentScrollX) < 0.05 && Math.abs(destinationScrollY - currentScrollY) < 0.05) {
  currentScrollX = destinationScrollX;
  currentScrollY = destinationScrollY;
  // stop scrolling flag / code goes here
}

// At this point set scrollTop(currentScrollY) and scrollLeft(currentScrollX)

更新

如果您想根据宽度/高度在 30 帧中滚动 x 和 y 一定数量的像素，那么

 var scaleX = widthOfScrollingDiv / 30;
 var scaleY = heightOfScrollingDiv / 30;

然后制作 30 帧动画，即使宽度和高度不同，您也会同时到达目的地。

Answer 2

如果您正在尝试计算 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 像素的视口，并且该视口内的内容为 400 像素。当完全向左滚动时，scrollLeft 将为 300px (400px - 100px)。 400 像素中的 300 像素将离开屏幕，最后 100 像素将在视口内可见。这就是为什么当您尝试计算 scrollLeft 的最大值时，您使用 scrollWidth - 视口 (.scroller) 的 clientWidth。做同样的事情来计算最大 scrollTop，Y-Scaling 是这两个数字之间的比率。

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

How do you calculate the number of times to call $( '#el'' ).scrollTop( 1 ) to traverse a div height of 759?

javascript

html

function

scale

vertical-scrolling