mediol-name
@mediol-name
Wordpress Developer

Как вызвать модальное окно при скроллинге до нужного блока?

Привет! На странице есть блок с id="popup", а также есть модальное окно с формой и id="exampleModal". Как сделать так, чтобы это окно открывалось, как только пользователь докрутит страницу до блока с id="popup"?
  • Вопрос задан
  • 323 просмотра
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
В зависимости от необходимой браузернйо поддержки у вас 2 варианта.

1 - более универсальный, но больше работы руками:
При загрузке документа находить в дереве ваш элемент с id=popup. Сохранить в переменную.
Добавлять обработчик скрола на документ и сверять текущий скролл и позицию элемента сверху от начала документа(тык и тык). Совпадает - вызываем модалку.

2 - более современный, но браузер сделает всё за вас:
Воспользоваться Intersection Observer
Суть ,в целом, та же. Указываете за каким элементом следить, указываете что следить нужно за появлением этого элемента во вьюпорте и указываете функцию обработчик этого события, в которой открываете модалку.

Вот пример кода на Intersection observer
var options = {
    root: null, // Не указываем = следим за областью вьюпорта.
    rootMargin: '0px', // отступы вокруг root
    threshold: 1.0
}
var callback = function(entries, observer) { 
    // Открываем модалку
};
var observer = new IntersectionObserver(callback, options);

/* Параметр threshold со значением 1.0 означает что функция будет вызвана при 100% пересечении объекта (за которым мы следим) с объектом root */


var target = document.querySelector('#popup'); // элемент, за которым будем следить.
observer.observe(target);


Профит
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы