jQuery .scrollTop() не прокручивается до элементов li, как ожидалось

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

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

У меня есть следующий jsfiddle: http://jsfiddle.net/YD9s5/9/< /а>

Элементы:

  • Прокручиваемый div с идентификатором photos-div
  • Ненумерованный список с идентификатором photos-li (упс, оставим его пока)
  • Элементы списка с возрастающими идентификаторами photo-li-X, где X — число

Код, используемый для прокрутки div:

        $('#photos-div').scrollTop($('#photo-li-' + i).offset().top);

Как видите, переменная i увеличивается.


javascript jquery scrolltop
person taco    schedule 12.06.2013    source источник
comment
stackoverflow.com/ вопросы/34068396/   -  person Abdo-Host    schedule 02.06.2016

Ответы (2)


arrow_upward
6
arrow_downward

Проблема в том, что .offset() получает позицию элемента относительно всего документа, и эта позиция постоянно увеличивается. Таким образом, как только вы прокрутите до элемента 1, он вернет .offset().top, который элемент 1 в настоящее время имеет в документе, и теперь он находится там, где раньше находился элемент 0.

Добавьте console.log( $('#photo-li-0').offset() ); в начало вашей функции scrollToElement(), и вы поймете, что я имею в виду. Обратите внимание, что верхнее смещение продолжает уменьшаться, быстро переходя к отрицательным числам по мере удаления от верхней части документа.

Исправление состоит в том, чтобы взять разницу между смещением $('#photo-li-'+i) и $('#photo-li-0') (или самого контейнера $('#photos-li')) и перейти к ней:

var newpos = $('#photo-li-' + i).offset().top - $('#photo-li-0').offset().top;
$('#photos-div').scrollTop(newpos);

http://jsfiddle.net/mblase75/x4hQP/ (включает другие улучшения)

person Blazemonger    schedule 12.06.2013
comment
Спасибо, похоже, это работает так, как я ожидаю. Я собираюсь рассмотреть это немного дольше. - person taco; 12.06.2013

arrow_upward
0
arrow_downward

Похоже, что .offset() измеряет только верхнюю часть документа. Вас интересует, как далеко элемент находится от вершины #photos-div. Вот рабочая версия, в которой я отслеживаю позицию в div вручную. Обратите внимание в консоли, что когда я записываю значение .offset(), оно относится к документу, а не к прокручиваемому div.

Кажется, должен быть способ сделать это, не сохраняя позицию этого div в состоянии. Работаю над этим...

Вот мое более программное решение.

person Hank    schedule 12.06.2013
comment
Вы заметили, что он не прокручивает верхнюю часть ли? Это немного не так; немного больше каждый щелчок. - person taco; 12.06.2013