Jquery 滚动元素到新附加元素的位置（计算相对于父元素的偏移量）答案

【问题标题】：Jquery Scrolling Element to Position of Newly Appended Element (Calculating relative offset to parent)Jquery 滚动元素到新附加元素的位置（计算相对于父元素的偏移量）
【发布时间】：2013-09-04 12:00:58
【问题描述】：

我创建了一个水平的元素列表。该列表具有固定宽度并在溢出时滚动。当一个按钮被点击时，一个新元素被添加到这个列表中，我试图将 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 的末尾。

【问题讨论】：

标签： javascript jquery animation scroll

【解决方案1】：

改为：

ul.stop().animate({
    scrollLeft: li.position().left + ul.scrollLeft()
 }, 2000);

您正在寻找 position() 方法，它返回相对位置，而不是偏移量，它返回绝对（更正确 - 相对于文档）位置，并添加当前滚动状态（影响位置读取）

【讨论】：

@Ryan King 它没有，你只是总是追加到最后。例如，尝试预先添加。
看起来很棒，但我不太明白其中的逻辑。为什么如果li.offset = 48 和我设置scrollLeft = 180，li.position().left + ul.scrollLeft() 滚动回48？
因为在这种情况下 li 元素的位置是负数。它是从 ul 的开头开始计算的，但是 li 元素是在它的左边添加的:)。
你比一般的熊聪明。谢谢！