我创建了一个水平的元素列表。该列表具有固定的宽度并在溢出时滚动。单击一个按钮时,新元素将添加到此列表中,并且我正在尝试将ul元素滚动到此新创建的li元素。
这是我正在使用的JQuery:
var ul = $('ul')
$('button').click(function() {
var li = $('<li></li>');
ul.append(li);
ul.stop().animate({
scrollLeft: li.offset().left
}, 2000);
});
奇怪的是,如果您开始跟踪变量li.offset().left
,前几个元素的值几乎保持不变,并且滚动工作正常,直到li.offset().left
小于ul.scrollLeft()
最大值。
您可以在此处看到:http://jsfiddle.net/ePrwZ/16/
似乎正在发生的事情是li.offset().left
在我需要它时相对于父ul元素跟踪相对于文档的位置。但是由于溢出,我不能仅仅减去父母的遗嘱。有关如何计算这个的想法吗?
注意:我想滚动到特定元素而不仅仅是ul的结尾。
答案 0 :(得分:1)
更改为:
ul.stop().animate({
scrollLeft: li.position().left + ul.scrollLeft()
}, 2000);
您正在寻找position()方法,它返回相对位置而不是offset,它返回绝对(更恰当 - 相对于文档)位置,并添加当前滚动状态(这会影响位置读数)