javascript - 如何获取当前在浏览器视口(viewport)中显示的内容

Question

我怎样才能知道当前显示的是长文档的哪一部分？

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

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

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

谢谢 马丁

Answer 1

如果你有 jQuery，你可以使用这个函数来检查 DOM 元素当前是否显示在视口(viewport)中:

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