如何知道某些内容是否位于具有滚动条的div的可见区域？ jQuery的

Question

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

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

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

Answer 1

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

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

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

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');
});