Как проверить есть ли объект в зоне видимости?

Question

[lookingfor2]

На сайте стоит плагин smooth-scrollbar(меняем поведение при скролле), и поэтому я не могу отследить с помощью таких плагинов как wow, viewport.jquery и тд находится ли контейнер в зоне видимости и соответственно не могу в нужный момент проанимировать нужный div, при этом на данном сайте - https://curenails.co/en-US/menus/facial все работает, хотя так же установлен плагин со скроллом

Answer 1

[Алексей Ярков]

Intersection Observer API

Comments

[lookingfor2]

Подскажите еще, пожалуйста
Сюда мы можем передать один аргумент для наблюдения за блоком, а если у меня много дивов за которыми нужно наблюдать, я же не могу передать сюда массив элементов с классом "animate", как быть ?

var options = {
			root: document.querySelector('#my-scrollbar'),
			rootMargin: '0px',
			threshold: 1.0
		};

		var callback = function(entries, observer) {
			entries.forEach(entry => {
				entry.time;               // a DOMHightResTimeStamp indicating when the intersection occurred.
				entry.rootBounds;         // a DOMRectReadOnly for the intersection observer's root.
				entry.boundingClientRect; // a DOMRectReadOnly for the intersection observer's target.
				entry.intersectionRect;   // a DOMRectReadOnly for the visible portion of the intersection observer's target.
				entry.intersectionRatio;  // the number for the ratio of the intersectionRect to the boundingClientRect.
				entry.target;             // the Element whose intersection with the intersection root changed.
				entry.isIntersecting;     // intersecting: true or false
				console.log(entry.target);
			});
		};


		var observer = new IntersectionObserver(callback, options);

		var target = document.querySelectorAll('.animate')[1];

		observer.observe(target);

[Алексей Ярков]

lookingfor2, Добавлю в резюме строчку: "Профессионально гуглю н...

[lookingfor2]

Алексей Ярков, спасибо, я вот тоже нашел https://habr.com/ru/company/ruvds/blog/453586/