Question

我有一个带滚动条的列表。还有一个按钮，当按下它时，它会移动到某个#id，滚动条也会移动以使该元素可见。但这不准确。它会移动，但并不总是移动到确切的位置。如何使此滚动功能准确无误：

DEMO 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。

Offset是：

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

因此，这使得框的offset更小，列表越往下走。

你需要做的是弄清楚元素的高度+边距是什么并做一些数学运算：

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：

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。

如何使滚动条移动到准确的位置

1 个答案: