2

Есть лендинг, на нем есть определенная секция. мне нужно отследить момент, когда пользователь оказался на этом блоке. Проскроллил до него. как это можно определить?

1
  • как вариант взять расстояние от верха страницы блока, который нужен $(block).offset().top и значение на сколько проскролили сверху document.documentElement.scrollTop. и если расстояние на сколько проскролили близко к $(block).offset().top значению значит он виден.
    – Tsyklop
    11 сен 2017 в 14:22

1 ответ 1

4

const elem = document.getElementById('block');

document.addEventListener('scroll', function() {
  const posTop = elem.getBoundingClientRect().top;
  
  // Блок достиг верхней границы экрана (или выше)
  // elem.classList.toggle('visible', posTop <= 0);
  
  // Блок только появляется снизу (или выше)
  // elem.classList.toggle('visible', posTop < window.innerHeight);
  
  // Блок целиком находится в видимой зоне
  elem.classList.toggle('visible', posTop + elem.clientHeight <= window.innerHeight && posTop >= 0);
});
#block {
  height: 100px;
  margin: 400px 0;
  border: 1px solid red;
}

#block.visible {
  border-color: green;
}
<div id="block"></div>

Для того, что бы отследить только первый раз:

const elem = document.getElementById('block');

document.addEventListener('scroll', onScroll);

function onScroll() {
  const posTop = elem.getBoundingClientRect().top;
  
  if(posTop + elem.clientHeight <= window.innerHeight && posTop >= 0) {
    elem.classList.add('visible');
    document.removeEventListener('scroll', onScroll);
  }
}
#block {
  height: 100px;
  margin: 400px 0;
  border: 1px solid red;
}

#block.visible {
  border-color: green;
}
<div id="block"></div>

5
  • а если нужно один раз отследить этот момент,а не каждый раз visible? (пишу на реакте)
    – werty
    11 сен 2017 в 14:53
  • @werty, .visible тут используется только для наглядности, ключевое тут - условие. Добавил в ответ вариант с проверкой первого появления (опять же, достаточно просто поменять условия в if(...) 11 сен 2017 в 15:02
  • а зачем условие positionTop >= 0
    – werty
    12 сен 2017 в 11:37
  • @werty, эти условия взяты из примера без "определения первого вхождения", там это надо было, что бы класс убирался когда блок выше окна уходит. Для единоразового срабатывания не нужно. Я бы скорее взял второй вариант, который posTop < window.innerHeight для вашего случая ну или что-то типа posTop < window.innerHeight / 2. 12 сен 2017 в 11:44
  • понятно. спасибо!
    – werty
    12 сен 2017 в 12:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.