여러 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'); 
     } 
    }); 
    } 
}); 

• (How to tell if a DOM element is visible in the current viewport?isElementInViewport JS 방법에서 가져온).