javascript - 如何跨浏览器一致地滚动到 DIV 的子元素？

Question

我这里有一个测试用例:

http://www.libsys.und.edu/dev/scroll-test.html

它有一个包含很长链接列表的 DIV。我想将 DIV 向下滚动到给定的链接。在我的测试案例中，这是通过按下 JSTOR 按钮完成的，这会将它推进到 JSTOR 链接。在实际生产样本中，将根据键盘输入选择链接。因此，例如，按“B”会将其前进到第一个“B”链接，Biological Abstracts。

我的测试用例中的预期结果是:我单击 JSTOR，它会滚动，因此 JSTOR 位于 DIV 的顶部。这可能涉及向下或向上滚动，具体取决于 DIV 已经滚动了多远。

实际结果取决于 DIV 是否已经滚动。

如果 DIV 根本没有滚动，那么它在所有浏览器中都可以正常工作。

如果DIV已经滚动过(哪怕是一点点)，结果如下:

1. Firefox 向下滚动并将 JSTOR 放在 DIV 的底部。
2. Chrome 向下滚动并将 JSTOR 放在 DIV 的底部。 (但见下文)
3. Safari 向下滚动并将 JSTOR 放在 DIV 的底部。 (但见下文)
4. Chrome 向下滚动并将 JSTOR 放在 DIV 的底部。
5. Opera 向下滚动并将 JSTOR 放在 DIV 的顶部。

此外，在我无法令人满意地识别的某些情况下，Chrome 和 Safari 都会向下滚动并将 JSTOR 链接垂直居中放置在 DIV 的中间。

Opera 是唯一一款始终如一地满足我预期的浏览器。 Firefox 和 IE 的做法不同，但至少始终不同，并且它们的行为彼此匹配；我不知道如何理解 Chrome 和 Safari 的行为。

那么——是否有某种方法可以滚动 DIV，使目标链接在浏览器中始终相对于其父项处于相同位置？我什至不在乎它是否在顶部，真的，尽管这对我来说最有意义。只要我能让它始终如一地工作，我就会很高兴。

为了长期记录，这是我的 CSS 和 JS； HTML 只是一个 ID 为“box”的 DIV 中的一长串链接。我试图用它制作一个 JS Fiddle，但它让我失望了——我认为它不喜欢 HTML 源代码的长度。

CSS:

#box {
    width: 300px;
    height: 200px;
    overflow: auto;
    position: relative;
}

#box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

JS:

// I'm running scrollTop() and position().top through Math.floor() because
// Firefox likes reporting fractional values for pixels, for some reason.
function reportOffsets(){
    var offset = Math.floor($("#box").scrollTop());
    var position = Math.floor($("#jstor").position().top);
    $("#counter").html(offset+"px; J "+position+"px");
}

$(document).ready(function(){
    // When the box scrolls, tell me its current offset and where JSTOR is.
    $("#box").scroll(reportOffsets);

    $("#go").click(function(e){
        // Get the current position of the JSTOR link.
        var position = Math.floor($("#jstor").position().top);

        // Scroll the box down to it.
        $("#box").scrollTop(position);

        $("#jstor").focus();

        reportOffsets();
    });

    reportOffsets();
});

Answer 1

DOM 方法 scrollIntoView()应该正是你想要的。有一个 optional alignWithTop默认为 true 的参数。如果您使用 false(如在 Demo 中)，元素将改为与底部对齐。