> });
>
Функция >isInside перебирает всех предков узла, пока не доходит до верха документа (и тогда узел равен >null), или же не находит заданного ей родителя.
Должен добавить, что такой эффект достижим гораздо проще через псевдоселектор CSS под названием >:hover, как показано ниже. Но когда при наведении вам надо делать что-то более сложное, чем изменение стиля узла, придётся использовать трюк с событиями >"mouseover" и >"mouseout".
>
>Наведите мышь на этот параграф .
Когда элемент прокручивается, запускается событие >"scroll". Это используется во многих случаях, например чтобы узнать, на что сейчас пользователь смотрит (чтобы останавливать анимацию, не попавшую на экран, или отправлять секретные шпионские донесения в ваш злодейский штаб), или визуально демонстрировать прогресс (подсвечивая часть содержания или показывая номер страницы).
В примере в правом верхнем углу документа создаётся индикатор процесса, который заполняется по мере прокрутки элемента вниз.
>
>
>Scroll me...
>
Позиция элемента >fixed означает почти то же, что >absolute, но ещё и предотвращает прокручивание элемента вместе с остальным документом. Смысл в том, чтобы оставить наш индикатор в углу. Внутри него находится другой элемент, который изменяет размер, отражая текущий прогресс. Мы используем проценты вместо >px для задания ширины, чтобы размер элемента изменялся относительно размера всего индикатора.
Глобальная переменная >innerHeight даёт высоту окна, которую надо вычесть из полной высоты прокручиваемого элемента – при достижении конца элемента прокрутка заканчивается. (Также в дополнение к >innerHeight есть переменная >innerWidth). Поделив текущую позицию прокрутки >pageYOffset на максимальную позицию прокрутки, и умножив на 100, мы получили процент для индикатора.
Вызов >preventDefault не предотвращает прокрутку. Обработчик события вызывается уже после того, как прокрутка случилась.