Question

我不使用jQuery。没有它可以解决这个问题吗？

我只有1个HTML / JavaScript /（CSS）页面。它包含在同一页面上引用html元素的链接。该页面有一个自动垂直滚动条，因为它很长。我需要我的事件处理程序，用于链接点击，以便在点击时检查引用的元素是否在屏幕上。如果它在那里页面不应该改变位置。这可能吗？怎么样？

检查是否在屏幕上
不要移动页面

此代码是页面跳转的简单示例，因此“hello world 2”位于浏览器窗口的最顶层。

<html>
    <head>
        <script type='text/javascript' language='javascript'>
            function onLinkClick(id)
            { }
        </script>
    </head>
    <body>
        <div id="id1">hello world 1</div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <div id="id2">hello world 2</div>
        <a href="#id2" onclick="onLinkClick('id2')">link</a>
        <div id="id3">hello world 3</div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body>
</html>

Answer 1

你试过

吗？

getElementByTagName（）???

Answer 2

好的，我自己解决了（是的，在引用的重复问题的帮助下）。使用否 jQuery：

function isElementVisible(element)
{
    var posTop = 0;
    var temp = element;
    while (temp)
    {
        posTop += temp.offsetTop;
        temp = temp.offsetParent;
    }
    var posBottom = posTop + element.offsetHeight;
    var visibleTop = document.body.scrollTop;
    var visibleBottom = visibleTop + window.innerHeight;
    return ((posBottom >= visibleTop) && (posTop <= visibleBottom));
}

function onLinkClick(id)
{
    var x = document.getElementById(id);
    if (isElementVisible(x))
        // prevent page to be scrolled up or down
        event.preventDefault();
}

如果html元素在屏幕上，如何不移动页面？

2 个答案: