Intersection Observer: два примера использования

preview_player
Показать описание
#IntersectionObserver
Посмотрим как использовать Intersection Observer API для определения количества просмотренных секций на странице, ориентируясь на показ по viewport последних параграфов секций, а также посмотрим как показывать пункт меню, соответствующий просматриваемой секции

  1. htmllab
  2. IntersectionObserver
  3. Intersection Observer API
  4. Intersection Observer
  5. new IntersectionObserver
  6. observer IntersectionObserver
Рекомендации по теме
Intersection Observer: два 0:25:54

Intersection Observer: два примера использования

Intersection Observer лёгкий 0:24:54

Intersection Observer лёгкий пример

Простые решения для 0:29:23

Простые решения для сложных задач с Intersection Observer API

Intersection Observer. Практика 0:37:59

Intersection Observer. Практика на простом примере.

JS-решения №23. Подсветка 0:09:36

JS-решения №23. Подсветка активного пункта меню при скролле (IntersectionObserver API)...

Подсветка активного пункта 0:14:37

Подсветка активного пункта меню при скролле. Используем IntersectionObserver....

JavaScript - Всё 0:16:46

JavaScript - Всё о IntersectionObserver

React Intersection Observer 0:22:10

React Intersection Observer (scroll + lazy-load картинок)

Ленивая загрузка изображений 0:13:51

Ленивая загрузка изображений | lazy-loading | Intersection Observer API | Прогрессивные изображения...

Javascript Intersection Observer 0:33:37

Javascript Intersection Observer API

Урок 14. Наблюдатель 0:03:17

Урок 14. Наблюдатель (Observer)

#24 Javascript - 0:23:22

#24 Javascript - Intersection Observer | Вёрстка сайта визитки для начинающих | HTML, CSS, JS...

React Lazy Loading. 0:29:06

React Lazy Loading. Intersection Observer. Подгрузка при скролле - Vite, React, Typescript, Tailwind...

JS IntersectionObserver разбираемся 0:25:07

JS IntersectionObserver разбираемся как использовать #easyit #js #javascript @EasyITChannel ​...

Vue Intersection Observer. 0:06:58

Vue Intersection Observer. Intersecting in a Vuejs

Scroll Infinito (Infinite 0:06:07

Scroll Infinito (Infinite Scroll) | Intersection Observer API || En 5 Minutos!!

Intersection Observer in 0:00:51

Intersection Observer in Javascript

ResizeObserver - Отслеживание 0:08:35

ResizeObserver - Отслеживание resize DOM узла

Паттерн Observer. Пишем 0:56:14

Паттерн Observer. Пишем на чистом JavaScript. Подробно.

Важные аспекты при 0:16:25

Важные аспекты при работе с DOM в хуках | useMutationObserver

Замыкания JS. Последнее 1:06:22

Замыкания JS. Последнее и наиболее полное руководство, которое вам понадобится....

Javascript Observers - 0:20:31

Javascript Observers - Part 2 - Intersection Observer

Change Navbar's Background 0:10:29

Change Navbar's Background Color On Scroll | Intersection Observer | HTML, CSS & JavaScript...

Ленивая подгрузка ленты 0:16:00

Ленивая подгрузка ленты на JavaScript | Отслеживание пересечений | IntersectionObserver API...

Комментарии
Автор

Очень хороший урок! Спасибо! Понятно объясняете, приятный голос. Очень понравилось!

murcha
Автор

как хорошо, что наткнулась на ваше видео. все понятно для меня наконец то 😅 спасибище!

anastasijavvo
Автор

Cупер наглядные 2 примера, спасибо за видео! 👍

whatsmyageagain
Автор

Спасибо за видео. Все понятно и доступно! Уже смог реализовать у себя в проекте пару фич с IntersectionObserver =)

АнтонСурыгин-фж
Автор

годный контент, спасибо за то что делаете)

nurjigitalymbekov
Автор

Урок огонь, доступное объяснение и примеры того как это можно использовать) лайк, коммент, подписка!

ИгорьКаршев
Автор

Полезное знание. Я его сам на коленке не раз реализовывал. )) Спасибо )

yakut
Автор

А когда появился этот IntersectionObserver ?? с ES-6 ?

ДмитрийНормов-юц
Автор

Здравствуйте, спасибо за видео, но мне стало непонятно что делать если секции имеют разительно разную высоту. Я столкнулся с ситуацией что большинство секций очень маленький и попадают в область видимости полностью одновременно. Из-за чего активными ссылками становиться несколько, хотя хотелось бы что бы была только одна, принадлежащая верхней секции. При этом одна из секций довольно большая и по высоте выходит за пределы области видимости и может наполняться контентом в связи с чем получается ситуация, что для того что бы ссылка на большую секцию всегда была подсвечена нужно указать threshold ~ .1, что опять же приводит к одновременному выделению ссылок на мелкие секции.

sliker
Автор

Если информация про javascript, то лучше заранее подготовить разметку и стили. Не терять время на это. В данном случае Вы бы сэкономили 5 минут нашего времени и своего.

sha-altyn
Автор

Код рабочий, но объяснить как он работает и почему и не смогли.

artemkirkhmaier
Автор

Если хоть один человек понял что-то про сам observer из этого видео - я вас искренне поздравляю. Как по мне, видео абсолютно неинформативное

alym.aleksey
Автор

24:57 лучше сделать так:

a.classList.toggle('active', entry.isIntersecting)

StarkElessar