Изменить текст, когда изображение отображается на прокрутке реагировать - PullRequest
Новая
       64

Изменить текст, когда изображение отображается на прокрутке реагировать

0 голосов
/ 22 марта 2019

Я создаю веб-сайт портфолио с React с большой шириной изображения с вертикальной прокруткой. На боковой стороне веб-страницы есть одно текстовое поле, в котором я хотел бы отображать заголовок каждого изображения по мере появления каждого изображения.

Любые рекомендации о том, как изменить текст в DIV, когда изображение появляется в поле зрения? Я даже не уверен, что искать, чтобы найти ответ на это. Буду признателен за любую оказанную помощь. Спасибо!

1 Ответ

0 голосов
/ 22 марта 2019

Вы можете подключить слушателя прокрутки, чтобы определить, когда пользователь прокручивает. Внутри слушателя вам нужно выполнить некоторые математические расчеты, чтобы рассчитать, какой элемент просматривается в данный момент. Переменными, которые можно использовать для расчета, являются scrollTop (в контейнере, используемый для определения текущей позиции прокрутки) и clientHeight каждого элемента. 

let nameDisplayDiv = document.getElementById('display')
let containerDiv = document.getElementById('container')

function refresh() {
  let scrollTop = containerDiv.scrollTop + containerDiv.clientHeight / 2
  let height = 0
  for (let child of containerDiv.children) {
    let top = height
    let bottom = height += child.clientHeight
    if (top < scrollTop && bottom > scrollTop) {
      // Found the element that's currently viewed!
      nameDisplayDiv.innerHTML = child.style.backgroundColor
      break
    }
  }
}

containerDiv.onscroll = refresh

Вот рабочая скрипка: https://jsfiddle.net/uxh91Leq/2/

...