обнаружить #div, когда часть прокручивается в область просмотра

Question

У меня уже есть это, которое прекрасно работает:

function isScrolledIntoView(elem) {
    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();

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

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

Это обнаруживает, когда ВСЕМ #div находится в области просмотра. Тем не менее, я не могу понять, как это изменить, чтобы код обнаруживал #div, только когда он находится ЧАСТИЧНО в области просмотра. Вы можете помочь мне? Для вас это очень просто ... Спасибо! Я пытался ввести значения пикселей, но каждый раз путаюсь!

Answer 1

Это возможно без использования jquery. Мы можем получить ограничивающий прямоугольник, который окружает рассматриваемый элемент, и затем проверить, находятся ли верх или низ этого прямоугольника между верхом и низом нашего окна просмотра!

// Assuming elem is an actual element, not a string selector
// You can use jquery or standard dom functions like querySelector to find the element if it's a selector

function isScrolledIntoView(elem) {
   const box = elem.getBoundingClientRect();
   const topInside = (box.top > 0 && box.top < window.innerHeight)
   const bottomInside = (box.bottom > 0 && box.bottom < window.innerHeight)
   return topInside || bottomInside
}

Answer 2

Просто замените это:

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

на это:

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

и isScrolledIntoView функция вернет true, как только элемент окажется в области просмотра.