当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事件

回答

相关问题