driver458
@driver458

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

Есть контейнер div.
Внутри него есть блоки.
Нужно узнать какой из блоков сейчас находится в зоне видимости.
По скроллу нужно получать актуальное значение.
Для меня очевиден только вариант перебора всех элементов пока не встретится подходящий.
Возможно есть решение лучше?
  • Вопрос задан
  • 330 просмотров
Решения вопроса 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега JavaScript
Руководитель frontend направления, предприниматель
Есть такая штука, как offsetTop — расстояние элемента от начала документа. Используя его, размер области вьюпорта и значения скрола несложно высчитать текущее состояние.

З.Ы. в JS есть группа свойств, которые позволяют оценить позиционирование элемента во вьюпорте браузера.
Ответ написан
driver458
@driver458 Автор вопроса
Вот что у меня получилось:

updateActivePage = () => {
  const blockElements = document.getElementsByClassName("block");
  let activeIndex;

  Array.prototype.forEach.call(blockElements, (element, index) => {
    const rect = element.getBoundingClientRect();

    if (rect.top + rect.bottom > 0) {
      if (activeIndex === undefined) activeIndex = index;
    }
  });
  this.setState({ activeIndex });
};


алгоритм может быть улучшен, но меня на данный момент устраивает
Весь код + лайв пример
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Stalker_RED
@Stalker_RED
Экспериментальная штука: Intersection Observer API

Пока включена только в хроме (для ff нужно включить в настройках), но есть полифилл.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы