如何获取当前正在浏览器视口中显示的内容

Question

如何获得当前显示长文档的哪一部分的指示？

例如,如果我的html包含1,000行
1
2
3
...
999
1000

并且用户在显示第500行的中间附近然后我想得到"500 \n501 \n502"或类似的东西.

显然,大多数场景都比这更复杂,但我的要求是找到当前正在浏览器视口中显示的文本,以便我可以显示适合当前文本的状态值.

谢谢马丁

Answer 1

如果你有jQuery,你可以使用这个函数来检查视口中当前是否显示了一个DOM元素:

function isInView(elem) {

    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

Answer 2

您可以从scrollTop属性获取一个以像素为单位的值：

文档.body.scrollTop = 40;

要了解文档的哪一部分是可见的，您可以循环遍历（比如说）所有 p 标签，直到找到带有负 rollTop 值的 p 标签。前面的那个是窗口顶部的那个。