问题描述
更新:我已经创建了这个代码页演示，以显示我在说什么.该演示演示了两种方法，第一种是蛮力方法，第二种是Robert McKee的方法.
Update:I've created this Code Page demo to show what I'm talking about. This demo shows two methods, the first is the brute-force method and the second is Robert McKee's method.
使用第一种方法，请按滚动到结束按钮以得出垂直(y)缩放值，然后将其显示在刚刚按下的按钮旁边.按钮下方的值列表中，您还将看到水平滚动和垂直滚动所需的1px滚动数，以完全滚动到滚动区域的左下角，如 Scroll Y Count 和滚动X计数字段.现在显示缩放比例值并选中相邻的复选框，按 Scroll to End 按钮可显示相同数量的1px水平滚动和缩放后的垂直滚动现在到达滚动区域的右下端
With the first method, press the Scroll to End button to derive the vertical (y) scaling value, which is then shown next to the button that was just pushed. The list of values below the buttons, you will also see the number of 1px scrolls horizontally and vertically needed to fully scroll to the lower-left corner of the scroll-area, shown in the Scroll Y Count and Scroll X Count fields. With the scaling value now showing and the adjacent checkbox checked, pressing the Scroll to End button shows that the same number of 1px horizontal and scaled vertical scrolls now get to the lower-right end of the scroll-area.
使用第二种方法，按 Calculate Y Scale (计算Y比例尺)按钮即可计算y比例尺值，而无需实际滚动.计算完该值后，滚动第二次潜水以显示其有效.
With the second method, press the Calculate Y Scale button to calculate the y scale value without needing to actually scroll. After the value is calculated the second dive is scrolled to show that it works.
第一种方法找到一个y标度值，该值允许滚动，以便水平和垂直方向上下滚动，从而它们都以完全相同的滚动次数到达左侧和底部.我不确定为什么会有区别，但是第二种方法非常接近，只有一个滚动不同，所以足够好了.
The first method finds a y scale value that allow scrolling so that the horizontal and vertical scrolls over and down such that they both get to the left side and bottom with exactly the same number of scrolls. I'm not sure why there is a difference, but the second method is very close, only one scroll different, so its good enough.
原始问题:
我需要计算滚动div的水平和垂直滚动条所需的缩放比例值，以便在水平滚动完全横过div的宽度时，垂直滚动也完全横过同一div的高度.
I need to calculate the scaling values needed to scroll the horizontal and vertical scrollbars of a div so that when the horizontal scrolling completely traverses the width of the div, the vertical scrolling also completely traverses the height of the same div.
我现在通过首先手动计算 $('#div').scrollLeft(++ x) jQuery函数的调用次数以及分别计算 $('#div').scrollTop(++ y)函数，其中x和y值从0开始，每次调用增加1，这是滚动div宽度所需的和高度.在我的情况下，div宽为 540 像素，高为 759 像素，并且需要 342 次来覆盖宽度和 660 .据此，我可以计算出要放入垂直滚动功能调用 $('#div').scrollTop(++ y * yScale)的y缩放值，对于我的div来说是660/342.问题是div的宽度和高度并不总是相同，因此对于滚动div需要显示的所有可能的内容，我无法将y缩放值使用预先计算的值.
I do this now by first manually counting the number of of calls of the $( '#div' ).scrollLeft( ++x ) jQuery function and, separately, the number of calls of the $( '#div' ).scrollTop( ++y ) function, with the x and y values starting at 0, and increasing by 1 per call, that are needed to scroll over the div's width and height, respectively. In my case the div is 540 px wide by 759 px high, and it take 342 times to cover the width and 660 for the height. From this I can calculate the y scaling value to put in the vertical scroll function call, $( '#div' ).scrollTop( ++y * yScale ), to be 660/342 for my div. The issue is that the div's width and height aren't always the same so I can't use a pre-calculated value for the y scaling value for all possible contents that the scrolling div needs to display.
为什么x和y分别增加1像素，对于我的具体情况，每个滚动调用的次数不是540和759，而不是342和660?
在尝试自动执行计算之前，我尝试使用以0开头的参数值多次调用scrollTop函数，并在每次后续调用中以1个像素递增(0，1，2，... 10，11，..，20等)，我发现每个滚动调用的滚动量不一致.
Before trying to automate the calculations, I tried calling the scrollTop function multiple times with a parameter value starting with 0, and incrementing by 1 pixel in each successive call (0, 1, 2, ... 10, 11, .., 20, etc.), and I found that the amount scrolled by each scroll call was not consistent.
之所以这样包含，是因为由于不一致，我发现我不能依靠几个滚动调用的平均滚动量来计算遍历每个div轴方向的全部距离所需的调用总数.
I include this because with the inconsistency I found that I couldn't rely on the average scrolled amount by a few scroll calls to calculate the total number of calls needed to traverse the full distance of each div axis direction.
我可以使用一个循环来自动执行此操作，该循环计算每个维度的重复调用次数，当相应的滚动条停止滚动时停止为每个方向计数，并在两个滚动条停止滚动时停止循环，但是我宁可不必如果存在纯粹的数学方法来计算缩放比例值，请执行此操作.此外，对于div内容，每次加载时都会跳动，这对于用户来说似乎很奇怪，尤其是对于较大的内容并降低显示速度的情况.
I can automate this with a loop that counts the number of repeated calls for each dimension, stopping counting for each direction when the respective scrollbar stops scrolling, and stopping looping when both scrollbars stop scrolling, but I'd rather not have to do this if there is a purely mathematical way to calculate the scaling values. Besides, this would look odd to the user as the div contents jumped around each time it is loaded, especially for larger contents and slow the display.
有人知道该怎么做吗?
谢谢.
推荐答案
如果您要计算yScaling，请执行以下操作:
If you are trying to calculate yScaling, here you go:
var elem = $('#div2a').parent()[0]; // same as divScroller[0]
var yScaling = (elem.scrollHeight-elem.clientHeight) / (elem.scrollWidth-elem.clientWidth);
针对您的div，得出1.9298245614035088.
which for your divs, comes out to 1.9298245614035088.
如果要在"Ave Scroll Y"和"Ave Scroll X"中尝试计算的值，则这些值为1和1/1.9298245614035088，即0.5181818181818182.
If you want the values you are trying to calculate in "Ave Scroll Y" and "Ave Scroll X", then those values are 1 and 1/1.9298245614035088 which is 0.5181818181818182.
这是公式起作用的原因:假设您的视口宽度为100px，并且该视口中的内容为400px.向左完全滚动时，scrollLeft将为300px(400px-100px).400像素中的300像素将不在屏幕上，最后100像素将在视口内可见.因此，当您尝试计算scrollLeft的最大值时，请使用scrollWidth-视口(.scroller)的clientWidth.做同样的事情来计算最大的scrollTop，Y缩放就是这两个数字之间的比率.
This is why the formula works:Assume you have a viewport of 100px width, and the content inside that viewport is 400px. When fully scrolled left, the scrollLeft will be 300px (400px - 100px). 300px of the 400px will be off the screen, and the last 100px will be visible inside the viewport. That is why when you are trying to calculate the maximum value for scrollLeft, you use scrollWidth - clientWidth of the viewport (.scroller). Do the same thing to calculate the maximum scrollTop, and the Y-Scaling is the ratio between those two numbers.
这篇关于如何计算调用$('#el'').scrollTop(1)遍历div高度759的次数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！