如何知道某些内容是否在具有滚动条的 div 的可见区域中？ jQuery答案

【问题标题】：How to know if some content is in visible area of a div which has a scrollbar? jQuery如何知道某些内容是否在具有滚动条的 div 的可见区域中？ jQuery
【发布时间】：2011-03-24 08:21:46
【问题描述】：

我有一个有行的表。该表位于一个 div 中。表格的高度比 div 大，因此 div 有一个垂直滚动条，并且表格的某些行位于 div 的不可见区域中。都很好。

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

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

【问题讨论】：

您可以在每一行放置锚点（例如<a name="row1"></a>）然后跳转到该锚点：据我所知document.location = "#row1";，它会自行滚动div。跨度>

标签： javascript jquery html css

【解决方案1】：

有一个名为 .scrollIntoView() 的 DOM 方法完全符合您的描述。使用方法如下：

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

该方法有一个可选的alignWithTop 参数，它不仅确保元素可见，而且将元素置于滚动视口的顶部（就像单击锚点一样，正如影子向导在他的评论中所建议的那样)

【讨论】：

我非常喜欢了解这一点，所以我做了一个演示：jsfiddle.net/cLyNk/2
@mVChr — 你让我很开心。 :-)

【解决方案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/查看工作示例

【讨论】：