@strelkovandreyv

Как отследить видимость блока на экране браузера?

Добрый день, имеется длинная страница в которой идут друг за другом блоки
Задача такая, что мне нужно отслеживать так сказать прочитал пользователь блок или нет, т.е. когда блок помещается полностью на экран браузера то считается прочтенным, если не полностью то ещё нет. И такую проверку получается нужно при скроллинге делать.

В данном примере: https://jsfiddle.net/d456b0tx/
Мне нужно когда у пользователя страница открылась, то нужно чтобы некий скрипт пробежался по всем видимым блокам, и которые помещаются в страницу то внутри них кликнул по ссылке VIEW, далее когда пользователь будет дальше вниз скроллить, то такое же действие должны произойти со всеми последующими ссылками в блоках

Как такое можно реализовать, может готовое решение есть?
  • Вопрос задан
  • 41 просмотр
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 2
нужно знать данные скролла основной страницы и данные твоего блока. Почитай про scrollTop, scroll, scroTo и тому подобное.
Ответ написан
anatoly_kulikov
@anatoly_kulikov
Помог ответ? Отметь решением!
Первое, что приходит в голову, это сделать примерно следующее:
  1. Определяем высоту полученного документа (страницы) и размер экрана (достаточно тоже только высоты)
  2. Определяем положение блока на странице, примерно так - берем его верхнюю границу, высоту блока, вычисляем нижнюю границу, добавляя ещё 50-100 пикселов (я б добавил)
  3. При скролле страницы проверяем, насколько пользователь проскроллил документ, больше ли значение проскролленого, чем вычисленная нами страница
  4. Если условие проходит => выполняем нужное действие


Логика примерно такая. Вроде как был какой-то скрипт, который определял "видимость" блока на экране, но название не помню (но ощущение, что использовался как дополнение к библиотечке animate.css).
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
AnyChart Иркутск
от 20 000 руб.
PROFI.RU Москва
от 180 000 руб.