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

标签 javascript html function scale vertical-scrolling

更新:
我创建了这个 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 内容时都会跳来跳去,尤其是对于较大的内容并减慢显示速度。

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

谢谢。

最佳答案

如果您尝试计算 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 是这两个数字之间的比率。

关于javascript - 如何计算调用 $( '#el' ' ).scrollTop( 1 ) 遍历 div 高度 759 的次数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60490315/

相关文章:

javascript - 使用 DateAdd() 在 Javascript/Classic ASP 中设置日期格式

javascript - 如何以 javascript 方式创建 php getter 和 setter

javascript - XMLHttpRequest:文档元素后的垃圾

javascript - 如何在 HTML 页面中包含 webpack 生成的文件?

html - 如何制定更好的 CSS ID 规则

计算复利百分比的Python函数

function - 获取不同内容 map 的所有 map 键[字符串]

javascript - 如何在 onClick 中绑定(bind) angularjs 的数据作为参数

jquery - 如何使用css3为div设置动画

javascript - jQuery 在多个元素上调用函数的更好方法?