How to not move page if html element is on screen?

StackOverflow https://stackoverflow.com/questions/19658941

  •  01-07-2022
  •  | 
  •  

문제

I don't use jQuery. Can this be solved without it ?

I have only 1 HTML / JavaScript / (CSS) page. It contains links that reference html elements on the very same page. The page has a automatic vertical scrollbar because it is long. I need my event handler for link clicks to check if the referenced element is on the screen at the moment of the click. If it is there the page should not change position. Is that possible and how ?

  1. check if on screen
  2. don't move page

This code is a simple example that the page jumps so that the "hello world 2" is on the very top of the browser window.

<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>
도움이 되었습니까?

해결책 2

Ok, I solved it by myself (yes with some help of the referenced duplicate question). Using no 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();
}

다른 팁

did you tried

getElementByTagName() ???

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top