如果html元素在屏幕上，如何不移動頁面？

我不使用jQuery。沒有它，這可以解決嗎？如果html元素在屏幕上，如何不移動頁面？

我只有1個HTML/JavaScript /（CSS）頁面。它包含在同一頁面上引用html元素的鏈接。該頁面有一個自動垂直滾動條，因爲它很長。我需要我的事件處理程序鏈接點擊以檢查引用的元素是否在點擊時屏幕上。如果它在那裏，頁面不應該改變位置。這是可能的和如何？

檢查，如果在屏幕上
不動頁面

此代碼是一個簡單的例子，頁面跳轉，使「世界你好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>

來源

2013-10-29 Bitterblue

請尋找到一個有可能重複的問題在這裏： http://stackoverflow.com/questions/5353934/check-if-element-is-visible-on-screen –

還一個可能的重複[檢查元素是否可見後滾動]（http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling） –

@ChristoferEliasson檢查可見性是其中的一部分我的問題。 – Bitterblue

好吧，我自己解決了它（是與一些援引的引用重複問題）。使用沒有的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-29 14:33:55 Bitterblue

做你試圖

getElementByTagName（）???

來源

2013-10-29 13:03:16 sam

如果html元素在屏幕上，如何不移動頁面？

回答

相關問題