如果HTML元素在屏幕上,如何不移动页面?

我不使用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>
    

    你试过了吗?

    getElementByTagName()???


    好的,我自己解决了这个问题(是的,引用了重复问题的一些帮助)。 使用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();
    }
    
    链接地址: http://www.djcxy.com/p/83605.html

    上一篇: How to not move page if html element is on screen?

    下一篇: How to get/catch event off screen element?