8

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

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

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

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

谢谢马丁

4

5 回答 5

6

如果你有 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));
}
于 2010-09-07T12:25:37.153 回答
4

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

document.body.scrollTop = 40;

要知道文档的哪一部分是可见的，您可以遍历（比如说）所有 p 标记，直到找到一个具有负 scrollTop 值的标记。之前的那个是窗口顶部的那个。

于 2010-09-07T12:20:28.323 回答
1

我刚刚在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!");
   }
}
于 2012-06-07T09:55:43.123 回答
0

是的，有办法。我将使用 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 之间，我都会放入一个数组。

于 2010-09-07T12:18:36.780 回答
0

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

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

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

于 2010-09-08T11:53:39.983 回答