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

Question

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

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

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

Answer 1

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

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