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

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属性获取一个以像素为单位的值：

document.body.scrollTop = 40;

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

Answer 3

我刚刚在 msdn

function isinView(oObject)
{
   var oParent = oObject.offsetParent; 
   var iOffsetTop = oObject.offsetTop;
   var iClientHeight = oParent.clientHeight;
   if (iOffsetTop > iClientHeight) {
     alert("Special Text not in view. Expand Window to put Text in View.");
   }
   else{
      alert("Special Text in View!");
   }
}

Answer 4

是的，有办法。我将使用 YUI 的 API 来说明我的示例。首先，您的文本必须位于某种 dom 元素中，无论是 span、div、p 还是其他任何内容，它都必须位于元素中。这里我将假设列表项

var viewPortY = YAHOO.util.Dom.getDocumentScrollTop(),
viewPortHeight = YAHOO.util.Dom.getViewportHeight(), i = 0,
// get all the dom elements that contain the text, sorry if this isn't exact, its just a rough example
items = YAHOO.util.Dom.getElementBy(null, 'li', document.getElementById('item-container')),
viewedItems = [];
    for (i = 0 ; i < items.length; i++) {
        var y = YAHOO.util.Dom.getY(items[i])
        if (y > viewPortY && y < (viewPortY + viewPortHeight)) {
           viewedItems.push(items[i])
        }
    }

所以本质上，我得到了包含您感兴趣的文本的所有dom对象。然后我循环遍历，无论谁的Y坐标在视口Y和Y + ViewPort高度之间，我都会放入一个数组中。

Answer 5

我实现了我认为更适合我的环境的解决方案：

我正在为 Android 编写代码，这样我就可以轻松地从 javascript 与 Java 类进行交互。我的实际解决方案涉及获取我感兴趣的所有标签的 offsetTop 并将偏移量传递给 java.lang.

还注册一个 onscroll 处理程序，将 window.pageYOffset 传递给同一个 Java 类。然后java类可以将每个标签的offsetTop与pageYOffset进行比较，以查看哪个标签位于当前视口的顶部。