Javascript getBoundingClientRect() - 应用于 class 的多个实例

Question

我一直在尝试使用一个函数来检测元素是否在视口中：

function isElementInViewport (el) {
    var rect = el[0].getBoundingClientRect();
    return (rect.top>-1 && rect.bottom <= $(window).height());
}
var s= $('.special'),
    y = $('.status');

$(window).on('scroll resize', function(){
    if(isElementInViewport(s))
    {
        setTimeout(function(){
            if(isElementInViewport(s))
            {
            var offer_id = s.data("offer-id");
          alert(offer_id);
            y.text('Yes');
        }
      }, 3000);
    }
    else
    {
        y.text('No');
    }
});

不幸的是，这似乎只适用于 class 'special' 的第一个实例。我如何让它应用于 class 的所有实例？

请注意，我添加了 3 秒的延迟，以防止触发快速滚动。

这是我的进度的 jsfiddle：http://jsfiddle.net/azjbrork/6/

Answer 1

使用 jquery each 我们可以运行 .special class 的每个实例上的函数并相应地返回报告（下面的片段）：

function isElementInViewport(el) {
  var rect = el[0].getBoundingClientRect();
  return (rect.top > -1 && rect.bottom <= $(window).height());
}
var s = $('.special'),
  y = $('.status');

$(window).on('scroll resize', function() {
  s.each(function() {
    var $this = $(this);
    if (isElementInViewport($this)) {
      setTimeout(function() {
        if (isElementInViewport($this)) {
          var offer_id = $this.data("offer_id");
          // advise using an underscore instead of a hyphen in data attributes
          //      alert(offer_id); // reported in text below
          y.text('Yes : ' + offer_id);
        }
      }, 200);
    } else {
      //    y.text('No'); // omit this line otherwise it will always report no (subsequent out of screen divs will overwrite the response)
    }
  });

});

.special {
  width: 80px;
  height: 20px;
  border: 1px solid #f90;
  margin-top: 200px;
}
.status {
  position: fixed;
  right: 2em;
  top: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class='special' data-offer_id='a'></div>
<div class='special' data-offer_id='b'></div>
<div class='special' data-offer_id='c'></div>
<div class='special' data-offer_id='d'></div>
<div class='special' data-offer_id='e'></div>
<div class='special' data-offer_id='f'></div>


<div class='status'></div>

Javascript getBoundingClientRect() - 应用于 class 的多个实例

Javascript getBoundingClientRect() - apply to multiple instances of class

javascript

jquery

getboundingclientrect