在scroll上显示图像时更改文本

Question

我正在建立一个与反应与大全宽垂直滚动图像组合网站。在网页的一侧有一个单独的文本框，我想显示每个图像的标题，因为每个图像进入视图。

对于如何在图像进入视图时更改DIV中的文本，有什么建议吗？我甚至不确定要搜索什么才能找到这个问题的答案。任何帮助都是非常感谢的。谢谢!

Answer 1

您可以附加一个onscroll侦听器来检测用户何时滚动。在侦听器内部，您需要做一些数学运算来计算当前查看的是哪个元素。可用于计算的变量是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/