如何判断带有滚动条的div中的内容是否在可见区域内？jQuery

Question

我有一个包含行的表格，该表格位于一个div中。 由于表格比div更高，因此div具有垂直滚动条，并且一些表格行位于div的不可见区域中。 这很好。

然后，通过JavaScript搜索一些文本，告诉我它在哪一行。 如果该行不可见，则希望滚动div以显示该行。

如何确定该行是否在div的可见或隐藏部分？ 我可以通过进行高度计算来获取它，但想知道是否有更简单的方法。

- Tony_Henrich

---

你可以在每一行上放置锚点（例如 <a name="row1"></a>），然后只需跳转到该锚点：document.location = "#row1"; 据我所知，它会自动滚动 div。 - Shadow The Spring Wizard

Answer 1

有一个名为.scrollIntoView()的DOM方法，它可以实现您所描述的功能。以下是使用方法：

var tr = document.getElementById("myRow");
tr.scrollIntoView();

该方法有一个可选的alignWithTop参数，它不仅确保元素可见，而且将元素放置在滚动视口的顶部（就像点击锚点一样，正如Shadow Wizard在评论中建议的那样）。

- Ben Blank

---

我非常喜欢了解这个，所以我制作了一个演示：http://jsfiddle.net/cLyNk/2/ - mVChr

@mVChr - 你刚刚让我开心了。 :-) - Ben Blank

Answer 2

使用jQuery的position()函数获取匹配行的位置，然后在ScrollTop()函数中设置该值以到达元素。

这就是如何完成的。

var item = $('#test').position().top;
$('button').click(function() {
    $(window).scrollTop(item)
})

请查看此工作示例http://jsfiddle.net/U6tsg/1/

我还创建了一个动画版本

var item = $('#test').position().top;
$('button').click(function() {
    $('html, body').animate({
        scrollTop: item
    }, 'slow');
});

请查看此链接的工作示例：http://jsfiddle.net/U6tsg/2/

- Hussein