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

Question

[driver458]

Есть контейнер div.
Внутри него есть блоки.
Нужно узнать какой из блоков сейчас находится в зоне видимости.
По скроллу нужно получать актуальное значение.
Для меня очевиден только вариант перебора всех элементов пока не встретится подходящий.
Возможно есть решение лучше?

Answer 1

[Арсений Матыцин]

Есть такая штука, как offsetTop — расстояние элемента от начала документа. Используя его, размер области вьюпорта и значения скрола несложно высчитать текущее состояние.

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

Comments

[driver458]

Вы всё описание прочитали?

[Арсений Матыцин]

driver458, конечно нет, мне не платят за ответы на вопросы)
И тем не менее ответ не меняется. В нем только надо воспользовавшись вектором, который я выдал.

К слову, на тему перебора мне последнее время полюбилась конструкция одна: https://i-am.studio/static/default/js/color-picker.js
На самом сайте отрабатывает проверка для логотипа, на какой «поверхности» он находится. Но глубоко лезть не рекомендую. У нас на днях дропнулась база и мы ее вяло пересобираем. Пока в морду подставили тестово-вакханальный.
....

Чота какой-то мудреный вопрос. Сижу смотрю и голова начинает болеть.
Помнится я когда-то выводил конструкции для подобного рода проверок на jQuery без перебора или явного перебора, точно не помню уже, но это было давно и неправда. Как по мне перебор, как в примере, что я в этом ответе выше скинул оптимален. За исключением случаев динамической подгрузки. В таком случае надо немного модифицировать.

Ну а если я все-таки хоть и близко не навел на мысль, то бывает.

[driver458]

Арсений Матыцин, вопрос был в том возможно ли избежать перебора, помню что видел подобное на сайтах, искал сегодня и нашел в доках vuejs такое поведение, там использовался перебор, велик изобретать не стал

[Арсений Матыцин]

driver458, ну дык я о том и веду. Лично я вижу 2 подхода, ловить элемент перебором в момент события. Как в примере на скрине. Или каждому элементу повесить свою проверку, как я кидал ссылку.
Пл факту — оба случая с перебором. Но если в первом мы перебираем каждый раз при скролле, то во втором случае 1 раз и ждем, когда сработает. Если честно разницу в производительности не замерял, так что ничего на этот счет не скажу.
Скажу, что я сегодня совсем не в ударе и попытки пронести свою мысль прямо даются тяжело.

Ну а вообще посидев подумав, есть мнение, что без перебора никак. Надо же как-то сравнивать некоторый массив элементов, чтобы понять, который из них востребован в данный момент.

Answer 2

[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 });
};

алгоритм может быть улучшен, но меня на данный момент устраивает
Весь код + лайв пример

Answer 3

[Stalker_RED]

Экспериментальная штука: Intersection Observer API

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

Comments

[driver458]

под ие есть полифил?)