如何在滾動時按類名在屏幕上檢查div是否可見？

包含「演示格」如何在滾動時按類名在屏幕上檢查div是否可見？

<div class="call" style="margin-top:100px;"> 
    hi 
</div> 
<div class="call" style="margin-top:900px;"> 
    hello 
</div>

如果上述任何屏幕上使用收益類名真格，在滾動我用下面的腳本它總是返回我真實的，如何解決它檢查？

<script> 
jQuery.expr.filters.offscreen = function(el) { 
return (
     (el.offsetLeft + el.offsetWidth) < 0 
     || (el.offsetTop + el.offsetHeight) < 0 
     || (el.offsetLeft > window.innerWidth || el.offsetTop > window.innerHeight) 
); 
}; 

$(window).scroll(function() { 
alert($('.call').is(':offscreen')) 
}); 
</script>

來源

2013-06-22 Wiram Rathod

https://github.com/protonet/jquery.inview – undefined

你可能想看看這個：HTTP：// stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport – krishgopinath

哎，如何判斷一個DOM元素在當前視口可見？這不是類似的問題，我想要做到這一點使用類名稱不是任何元素的請求讀我@passionateCoder –

試試這個

$(document).scroll(function() { 
       if (isOnScreen($('.call:eq(0)'))) { 
        // $('.call:eq(0)') is visible on screen 
       } 

      }); 

    //this function return element is currently visible on screen or not in true/false 
      function isOnScreen(elem) { 
       var docViewTop = $(window).scrollTop(); 
       var docViewBottom = docViewTop + $(window).height(); 

       var elemTop = $(elem).offset().top; 
       var elemBottom = elemTop + $(elem).height(); 

       return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
      }

用於演示

<div class="call" style="margin-top: 100px;"> 
    hi 
</div> 
<label class="label1" style="margin-top: 500px;"> 
</label> 
<label class="label2" style="margin-top: 20px;"> 
</label> 
<div class="call" style="margin-top: 500px;"> 
    hello 
</div> 
    <script type="text/javascript"> 
     $(document).scroll(function() { 
      if (isOnScreen($('.call:eq(0)'))) { 
       $('.label1').text('first div show') // if first call class div is visible msg display in lable 
      } 
      else { 
       $('.label1').text('first div hide') 
      } 
      if (isOnScreen($('.call:eq(1)'))) { 
       $('.label2').text('second div show')// if second call class div is visible msg display in lable 
      } 
      else { 
       $('.label2').text('second div hide') 
      } 

     }); 
     function isOnScreen(elem) { 
      var docViewTop = $(window).scrollTop(); 
      var docViewBottom = docViewTop + $(window).height(); 

      var elemTop = $(elem).offset().top; 
      var elemBottom = elemTop + $(elem).height(); 

      return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
     } 
    </script>

來源

2013-06-22 09:42:24

如何在滾動時按類名在屏幕上檢查div是否可見？

回答

相關問題