Как рассчитать количество вызовов $ ('#el') .scrollTop (1) для пересечения высоты div в 759?

Question

Обновление: Я создал эту демонстрацию кодовой страницы , чтобы показать, о чем я говорю. В этой демонстрации показаны два метода, первый - метод грубой силы, а второй - метод Роберта Макки.

При первом методе нажмите кнопку Scroll to End , чтобы получить вертикальную величину ( y) значение масштабирования, которое затем отображается рядом с кнопкой, которая была только что нажата. В списке значений под кнопками вы также увидите количество прокруток в 1 пиксель по горизонтали и вертикали, необходимое для полной прокрутки до левого нижнего угла области прокрутки, показанного в Количество прокруток Y и Scroll X Count поля. Теперь, когда отображается значение масштабирования и установлен соседний флажок, нажатие кнопки Прокрутка до конца показывает, что такое же количество горизонтальных и масштабированных вертикальных прокруток размером 1 пиксель теперь попадает в правый нижний конец области прокрутки.

При втором способе нажмите кнопку Рассчитать шкалу 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 ), равное 660/342 для моего div. Проблема заключается в том, что ширина и высота div не всегда одинаковы, поэтому я не могу использовать предварительно рассчитанное значение для значения масштабирования по y для всего возможного содержимого, которое должен отображать прокручиваемый div.

Почему с шагом в 1 пиксель x и y количество вызовов каждой прокрутки не 540 и 759, а не 342 и 660 для моего конкретного c случая?

Перед попыткой автоматизации В вычислениях я пытался вызывать функцию scrollTop несколько раз со значением параметра, начинающимся с 0 и увеличивающимся на 1 пиксель при каждом последующем вызове (0, 1, 2, ... 10, 11, .., 20, et c.) , и я обнаружил, что сумма, прокручиваемая при каждом вызове прокрутки, была непоследовательной.

Я включил это, потому что с несоответствием я обнаружил, что не могу положиться на среднее значение прокрутки суммой по нескольким вызовам прокрутки, чтобы вычислить общее количество вызовов, необходимое для прохождения полного расстояния каждого направления оси деления.

Я могу автоматизировать это с помощью al oop, который считает th Число повторных вызовов для каждого измерения, прекращение счета для каждого направления, когда соответствующая полоса прокрутки прекращает прокрутку, и прекращение цикла, когда обе полосы прокрутки прекращают прокрутку, но я бы не стал этого делать, если существует чисто математический способ вычисления масштабирование значений. Кроме того, это выглядело бы странно для пользователя, поскольку содержимое div каждый раз перемещалось при загрузке, особенно для большего содержимого и замедления отображения.

Кто-нибудь знает, как это сделать?

Спасибо.

Answer 1

Если вы пытаетесь вычислить yScaling, то здесь вы go:

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

, который для ваших делений получается 1.9298245614035088.

Если вы хотите значения, которые вы пытаетесь чтобы вычислить в «Ave Scroll Y» и «Ave Scroll X», тогда эти значения равны 1 и 1 / 1,9298245614035088, что составляет 0,5181818181818182.

Вот почему работает формула: Предположим, у вас есть область просмотра шириной 100 пикселей, и содержимое в этом окне просмотра составляет 400 пикселей. При полной прокрутке влево scrollLeft будет 300px (400px - 100px). 300px из 400px будут вне экрана, а последние 100px будут видны внутри области просмотра. Вот почему, когда вы пытаетесь вычислить максимальное значение для scrollLeft, вы используете scrollWidth - clientWidth области просмотра (.scroller). Сделайте то же самое, чтобы вычислить максимальное значение scrollTop, и Y-Scaling - это соотношение между этими двумя числами.

Answer 2

Используйте currentScrollX и currentScrollY для установки текущей позиции полосы прокрутки и destinationScrollX и destinationScrollY для того места, куда вы хотите go

Затем каждая анимация l oop выполняет следующее для пересчета 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)

Обновить

Если вы хотите прокрутить x и y определенное количество пикселей в 30 кадрах на основе по их ширине / высоте затем

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

Затем вы анимируете 30 кадров, и вы достигнете места назначения одновременно, даже если ширина и высота не совпадают.