Я пытаюсь написать функцию JS, которая может определить, собирается ли определенный элемент войти в область просмотра.

Я работаю над решением для смартфонов, поэтому мне не нужно иметь дело с горизонтальным скольжением, мне нужно решение, которое определяет, собираюсь ли я прокрутить до определенного элемента по крайней мере 300 пикселей до того, как элемент войдет в область просмотра, либо из прокрутка вверх или вниз.

У меня уже есть функция, чтобы определить, находится ли элемент в настоящее время в области просмотра - см. Ниже.

var isInViewport = function(el) {
   var bounding = el.getBoundingClientRect();
   return (
       bounding.top >= 0 &&
       bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
   );
};

var isAboutToEnterViewport = function(el, distanceBeforeDetection) {
   // ??? code ???
}
-1
Penny Dreadful 11 Апр 2019 в 11:00

2 ответа

Лучший ответ

В качестве второго параметра вы можете опционально пройти пороговое расстояние, например

var isInViewport = function(el, dist) {
   var bounding = el.getBoundingClientRect();
   return (
       bounding.top >= 0 - (dist || 0) &&
       bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) 
                        + (dist || 0)
   );
};

var isAboutToEnterViewport = isInViewport(el, distanceBeforeDetection);
0
Fabrizio Calderan 11 Апр 2019 в 08:15
var isAboutToEnterViewport = function(el, distanceBeforeDetection)
    var bounding = el.getBoundingClientRect();

    return (
        bounding.top >= -1 * (distanceBeforeDetection) &&
        bounding.bottom <= ((window.innerHeight || document.documentElement.clientHeight) + distanceBeforeDetection)
    );
};

Применение:

var foo = isAboutToEnterViewport(el, 300);

Возвращаемое значение будет истинным, если el находится в области просмотра или оно ближе, чем 300px к нему.

0
frzsombor 11 Апр 2019 в 08:23