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

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

[@whatsmyageagain91]

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

[@anastasijavvo]

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

[@HtmllabRu]

Anastasia, круто!

[@murcha5899]

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

[@HtmllabRu]

Спасибо!

[@user-su3ef5cb8p]

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

[@HtmllabRu]

Рад, что был полезен)

[@user-xg2bg3nd2j]

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

[@HtmllabRu]

Игорь, спасибо)

[@Jmp3RR]

Спасибо! Очень понятно объясняете

[@nurjigitalymbekov1805]

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

[@HtmllabRu]

Спасибо) 👍

[@SemenAlexndrovich]

Спасибо за урок! Позволю себе небольшое замечание. Как по мне, содержание начала ролика немного диссонирует с самой темой, потому что если человек до неё добрался, то наверняка уже знает как что сверстать и стилизовать. Вероятно этот момент можно было бы ускорить / пропустить Кстати, если кому надо, на реакте есть готовый плагин react-intersection-observer. Там достаточно удобный api.

[@HtmllabRu]

Semyon, спасибо за конструктивное замечание! Я работаю над этим, но не всегда соблюдаю баланс.

[@zakiro4277]

пролистнуть или бегло посмотреть можно всегда, оставте

[@user-888azim-97]

@@zakiro4277 можно, конечно, написать "оставте", а можно написать "оставьте". и для многих разница будет существенной.

[@yakut54]

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

[@HtmllabRu]

Спасибо за поддержку😊👍

[@danielasangulov6103]

Урок, супер!

[@sliker602]

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

[@user-hk1go5rl9f]

столкнулся с такой же проблемой и ищу решение)

[@6sha-altyn]

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

[@elosyash239]

2:30 а что за плагин используется для такого ввода c последующей генерацией разметки?

[@HtmllabRu]

docs.emmet.io

[@user-or1hy4xz8u]

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

[@HtmllabRu]

Это HTML5 API ( не часть стандарта ECMAScript) . Насколько понимаю первый черновик датирован 2017м годом www.w3.org/standards/history/intersection-observer

[@user-or1hy4xz8u]

@@HtmllabRu ага, я тоже посмотрел спеку мозиллы. Оказывается, что этот Обзервер - всего лишь ЧЕРНОВИК на сегодняшний день)

[@evgeniyprowork]

пасиб, а где ссылка на код?)

[@HtmllabRu]

pastebin.com/58QMvYat Спасибо. Добавил в описание 👍

[@artemkirkhmaier484]

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

[@alym.aleksey]

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

[@StarkElessar]

24:57 лучше сделать так: a.classList.toggle('active', entry.isIntersecting)