观察没有多个if语句的多个元素

Question

我有一个片段，在滚动时检查元素是否在当前视口中。

我现在想在混合中添加多个元素，但是我想避免对每个元素进行多个if语句检查，我知道下面的代码不起作用，但它是我想要做的一个例子，有没有办法这样做？

var listOfPanels = $('#item2, #item2, #item3, #item4, #item5');

$(window).scroll(function(event) {
  // if the element we're actually looking for exists
  if (listOfPanels.length){

    // check if the element is in the current view using the attached function
    // and the event hasn't already fired
    if (isElementInViewport(listOfPanels)) {

      // do something
    }
  }
});

Answer 1

试试这个：

function isElementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}

var listOfPanels = $('#item2, #item2, #item3, #item4, #item5');
$(window).scroll(function(event) {
  if (listOfPanels.length){
    listOfPanels.each(function(){
      if (isElementInViewport($(this)[0])) {
        console.log($(this).attr('id') + ' in viewport');
      }
    });   
  }
});

• （isElementInViewport js方法来自：How to tell if a DOM element is visible in the current viewport?）

希望有所帮助。