javascript - 无需多个 if 语句即可监视多个元素

Question

我有一个片段，在滚动时它会检查元素是否位于当前视口(viewport)中。

我现在想添加多个元素到混合中，但我想避免对每个元素进行多个 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? )

希望有帮助。