當DIV在視圖中時觸發Javascript事件

在頁面上顯示某個DIV時是否可以觸發特定的JavaScript事件？例如，假設我有一個非常大的頁面，例如2500x2500，並且我有一個位置爲1980x1250的40x40 div。 div不一定是手動定位的，它可能會在那裏由於內容推送到那裏。現在，當用戶滾動到div可見的點時，是否可以運行一個函數？當DIV在視圖中時觸發Javascript事件

來源

2010-01-29 Russ Bradberry

https://github.com/imakewebthings/waypoints或https://github.com/stutrek/scrollMonitor也可以提供幫助 –

不自動。您必須捕捉滾動事件，並通過將div矩形的座標與可見頁面矩形進行比較來檢查它是否在視圖中。

下面是一個簡單的例子。

使其趕上有overflowscroll或auto所有祖先onscroll和調整前/左協ORDS其滾動位置

檢測overflow：

<div id="importantdiv">hello</div> 

<script type="text/javascript"> 
    function VisibilityMonitor(element, showfn, hidefn) { 
     var isshown= false; 
     function check() { 
      if (rectsIntersect(getPageRect(), getElementRect(element)) !== isshown) { 
       isshown= !isshown; 
       isshown? showfn() : hidefn(); 
      } 
     }; 
     window.onscroll=window.onresize= check; 
     check(); 
    } 

    function getPageRect() { 
     var isquirks= document.compatMode!=='BackCompat'; 
     var page= isquirks? document.documentElement : document.body; 
     var x= page.scrollLeft; 
     var y= page.scrollTop; 
     var w= 'innerWidth' in window? window.innerWidth : page.clientWidth; 
     var h= 'innerHeight' in window? window.innerHeight : page.clientHeight; 
     return [x, y, x+w, y+h]; 
    } 

    function getElementRect(element) { 
     var x= 0, y= 0; 
     var w= element.offsetWidth, h= element.offsetHeight; 
     while (element.offsetParent!==null) { 
      x+= element.offsetLeft; 
      y+= element.offsetTop; 
      element= element.offsetParent; 
     } 
     return [x, y, x+w, y+h]; 
    } 

    function rectsIntersect(a, b) { 
     return a[0]<b[2] && a[2]>b[0] && a[1]<b[3] && a[3]>b[1]; 
    } 

    VisibilityMonitor(
     document.getElementById('importantdiv'), 
     function() { 
      alert('div in view!'); 
     }, 
     function() { 
      alert('div gone away!'); 
     } 
    ); 
</script>

您可以通過提高該scroll,auto和hidden cropping把div從屏幕上移除

使用addEventListener/attachEvent允許多個VisibilityMonitors和其他東西使用調整大小/滾動事件
一些兼容性黑客以getElementRect，使共同ORDS在某些情況下更準確，有些事件解除綁定，以避免IE6-7內存泄漏，如果你真的需要。

來源

2010-01-29 00:52:19 bobince

您可以將getElementRect中的所有代碼替換爲內置的element.getBoundingClientRect（）。 –

下面是使用jQuery的首發例如：

<html> 
<head><title>In View</title></head> 
<body> 
    <div style="text-align:center; font-size:larger" id="top"></div> 
    <fieldset style="text-align:center; font-size:larger" id="middle"> 
     <legend id="msg"></legend> 
     <div>&nbsp;</div> 
     <div id="findme">Here I am!!!</div> 
    </fieldset> 
    <div style="text-align:center; font-size:larger" id="bottom"></div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    var $findme = $('#findme'), 
     $msg = $('#msg'); 

    function Scrolled() { 
     var findmeOffset = $findme.offset(), 
      findmeTop = findmeOffset.top, 
      scrollTop = $(document).scrollTop(), 
      visibleBottom = window.innerHeight; 

     if (findmeTop < scrollTop + visibleBottom) { 
      $msg.text('findme is visible'); 
     } 
     else { 
      $msg.text('findme is NOT visible'); 
     } 
    } 

    function Setup() { 
     var $top = $('#top'), 
      $bottom = $('#bottom'); 

     $top.height(500); 
     $bottom.height(500); 

     $(window).scroll(function() { 
      Scrolled(); 
     }); 
    } 

    $(document).ready(function() { 
     Setup(); 

    }); 
</script> 
</body> 
</html>

它只有一次在div進入從底部視圖通知。此示例不會通知div何時滾動到頂部。

來源

2010-01-29 00:55:45 slolife

再次，這是爲jQuery，而我全部爲jQuery，在我的情況下，我將無法使用它。 –

然後請注意，在這個問題上，所以發佈人會知道你的限制。似乎兩個人幾乎完全同時發佈，所以他們不可能知道。 – Cryophallion

當DIV在視圖中時觸發Javascript事件

回答

相關問題