0

私はjQueryを使用しません。これなしで解決できますか？

HTML / JavaScript / (CSS) ページが 1 つしかありません。まったく同じページの html 要素を参照するリンクが含まれています。ページが長いため、自動垂直スクロールバーが表示されます。参照された要素がクリックの瞬間に画面上にあるかどうかを確認するには、リンク クリック用のイベント ハンドラーが必要です。そこにある場合、ページの位置は変更されません。それは可能ですか？

  1. 画面に表示されているかどうかを確認する
  2. ページを移動しない

このコードは、「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>
4

2 に答える 2

0

わかりました、私はそれを自分で解決しました（はい、参照されている重複した質問の助けを借りて）。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();
}
于 2013-10-29T14:33:55.740 に答える
0

試しましたか

getElementByTagName() ???

于 2013-10-29T13:03:16.180 に答える