Question

如何显示当前正在显示长文档的哪一部分？

E.g。如果我的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-tag，直到找到具有负scrollTop值的文本。之前的那个是窗口顶部的那个。

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 Height之间，我都放入一个数组。

Answer 5

我实现了我认为对我的环境来说更优化的解决方案：

我正在为Android写作，所以我可以轻松地从javascript与Java类进行交互。我的实际解决方案包括获取我感兴趣的所有标签的offsetTop并将偏移量传递给java。

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

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

5 个答案: