3

我本质上在 div 中有一个未正确滚动到下一个元素的列表项的无序列表。我只是想有一个按钮来上下滚动列表。

li虽然代码确实滚动，但它与元素不匹配。每次单击后，它会向上滚动一点，然后在下一次单击时向下滚动。我试过遍历 DOM 并验证它滚动到的元素是一个li元素，但没有看到问题。

我有以下jsfiddle：http: //jsfiddle.net/YD9s5/9/

元素是：

  • 一个 id 的滚动 divphotos-div
  • 一个 id 为的无序列表photos-li（哎呀，暂时离开它）
  • 列出具有递增 id 的项目，photo-li-X其中 X 是一个数字

用于滚动 div 的代码是：

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

i如您所见，该变量正在递增。

4

2 回答 2

6

问题是.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/（包含其他改进）

于 2013-06-12T15:51:19.457 回答
0

似乎.offset()只能从文档顶部开始测量。您对元素与#photos-div. 这是一个工作版本，我在其中手动跟踪 div 中的位置。请注意，在控制台中，当我记录它的值时，.offset()它是相对于文档而不是滚动 div 的。

似乎应该有一种方法可以做到这一点，而无需在状态中携带该 div 的位置。正在努力...

这是我的更具程序性的解决方案。

于 2013-06-12T15:58:03.080 回答