Как сделать ивент при скролле до определенного элемента?

Question

[account-6]

Как сделать EventListener при скролле до появления определенного элемента на странице? Я осилил только скролл в пикселях, но ведь это не точно, так как размеры экрана могут меняться. Сторонние библиотеки не надо, как сделать на JS?

Вот допустим, сейчас у меня так

this.scrolled = window.scrollY > 100;

codepen.io/kodekrendel/pen/vmYeew

Как сделать так, чтобы это событие срабатывало когда я прокручиваю до h2, например?

Answer 1

[Evgeny Kulakov]

Как вариант: codepen.io/kerf/pen/NjWXqE

Comments

[account-6]

Спасибо, пашет :) Этот кусок кода сами написали, или это из какой-то библиотеки? Я просто мало со скроллом работал, думаю может где-то есть примеры разных триггеров? Как вообще посоветуете потренироватся по этим событиям? Не найду нормального мануала по теме, а документация сырая инфа, трудно.

[Evgeny Kulakov]

Код был написан с подачи Aleksey Chernikov)
Тут все просто, рассуждайте логически: getBoundingClientRect возвращает координаты относительно видимого окна, соответственно нам нужно, чтобы top вашего элемента был больше 0, а низ элемента не ниже чем низ окна.
Насчет примеров и библиотек не подскажу, не знаю.
Мне кажется проще идти от того, что нужно. И дальше посмотреть в сторону доступного api для разработки, например сюда

[account-6]

Evgeny Kulakov: хм, а можно сделать чтобы событие срабатывало СРАЗУ как только появляется верх элемента? В вашем примере событие отрабатывает когда элемент появляется полностью, т.е. по его нижней границе, и в итоге получается некрасиво - codepen.io/kodekrendel/pen/vmYeew

[Evgeny Kulakov]

Просто замените bottom на top в условии.

[account-6]

Evgeny Kulakov: офигеть! Спасибо!

[account-6]

Evgeny Kulakov: а вот еще вопрос, если не трудно. Предположим, у меня несколько элементов на странице разных, которые я хочу таким образом анимировать. Можно сделать универсальный метод?

let obj = document.querySelector('h2');

Answer 2

[Aleksey Chernikov]

Я бы повесил обработчик скролла на h2 и закрепил бы метод.
В методе создаем условие с использованием getBoundingClientRect. Он возвращает объект со значениями top и left. Соответственно, вам нужно top. Если меньше определенного количества пикселей - запускаем событие.

Comments

[account-6]

Ох, если не трудно не могли бы сделать на этом примере Vue, если знакомы с его синтаксисом? А то я в прицнипе понимаю о чем речь, но трудновато..

[account-6]

this.scrolled = element.getBoundingClientRect().top;

не работает. прошу помощи.