javascript - 如何让滚动条移动到准确的位置

Question

我有一个带滚动条的列表。还有一个按钮，当按下时，它会移动到某个#id，并且滚动条也会移动以使该元素可见。但这并不准确。它会移动，但并不总是到达确切的位置。我怎样才能使这个滚动功能准确:

演示 http://jsfiddle.net/danials/anpXP/1/

我的 jQuery 代码:

function next() {
    $(".list li").css("background", "grey");
    goToByScroll(myID);
    $("#" + myID).css("background", "red");
    myID = $("#" + myID).next("li").attr("id");
}

function goToByScroll(id) {
    $('.list').animate({
        scrollTop: $("#" + id).offset().top - $("#" + id).height()
    },
        'slow');
}

在演示中尝试按下一步按钮，您会在某些项目中看到滚动移动但不正确。

有什么想法吗？

Answer 1

您的代码的问题是，当您向下滚动列表时，您会获取每个元素的偏移。

Offset是:

The .offset() method allows us to retrieve the current position of an element
relative to the document.

因此，列表越往下走，框的偏移就越小。

您需要做的是计算出元素的高度+边距是多少，并进行一些数学计算:

var myID = $(".list").children().first().attr("id");

function next() {
    var li = $("#"+myID);
    $(".list li").css("background", "grey");
    var offset = parseInt(li.height())+parseInt(li.css("margin-top"));
    $('.list').animate({scrollTop: offset*(myID-1)},'slow');
    $("#"+myID).css("background", "red");
    myID++;
}

这个fiddle在行动中展示它。它的作用是获取当前元素的高度+边距，然后将其乘以列表中元素的数量。

这仅在所有元素大小相同且具有增量 ID 的情况下才有效。

更新

如果您想让它与动态 ID 一起使用，您所做的就是设置一个增量变量来跟踪您迭代了多少个 ID，然后像之前一样获取下一个 ID:

var myID = $(".list").children().first().attr("id");
var inc = 1;

function next() {
    var li = $("#"+myID);
    $(".list li").css("background", "grey");
    var offset = parseInt(li.height())+parseInt(li.css("margin-top"));
    $('.list').animate({scrollTop: offset*(inc-1)},'slow');
    $("#"+myID).css("background", "red");
    myID = $("#"+myID).next().attr("id");
    inc++;
}

这是一个 fiddle .