Question

我的网站上有一个部分，访客可以向下滚动经过4个高度不同但宽度相等的面板。我想根据占用最多屏幕空间的元素来更改背景。

过去，我使用的函数只是根据元素在视口中100％可见的时间将背景设置为一种颜色。但是，当视口高度小于元素高度时，这显然会中断。因此，现在我不得不基于占主导地位的面板而不是100％可见的面板设置背景。

我的功能如下：

const isScrolledIntoViewPerc = el => {
  let elemTop = el.offsetTop;
  let elemHeight = el.offsetHeight;
  let elemBottom = elemTop + elemHeight;
  let screenTop = document.documentElement.scrollTop;
  let screenBottom = screenTop + window.innerHeight;
  let result = 0;

  if (elemTop > screenTop) {
    // scrolled off bottom of screen
    if (elemBottom < screenBottom) {
      // fully
      result = 100;
    } else if (elemTop < screenBottom) {
      // partially
      result = ((screenBottom - elemTop) / elemHeight) * 100;
    }
  } else if (elemBottom > screenTop) {
    // scrolled off top of screen
    result = ((elemBottom - screenTop) / elemHeight) * 100;
  }

  return +result.toFixed(2);
}

这已正确报告百分比，已在this pen I made中进行了验证。

但是，在我的应用程序上下文中，它无法正确报告。在控制台中查看的每个元素的百分比为时过早。例如。当面板1/4在屏幕上占一半时，报告为100％。当您进一步向下滚动时，到达面板3周围时，面板4已报告为100％可见！我不明白为什么会这样。

这里是上下文（React组件）。上面的函数已导入并按上面的名称命名。

使用React钩子的父组件Parent.js，通过传递作为道具的函数来更新子状态：

const [activeSlide, updateActiveSlide] = useState('some-title')

const getVisibilityFromChild = (childId, childVisibility) => {
  console.log(`${childId} with visibility ${childVisibility}`)
  // logic to update background based on largest number
}

return (
  <Content
    title="Title"
    passVisibilityUpwards={getVisibilityFromChild}
  >
)

一个包装所有4个面板的容器组件，Content.js调用以prop形式传递的函数，如下所示：

// fires on scroll, for each of the 4 panels
checkVisibleOnScroll = () => {
  this.props.passVisibilityUpwards(
    slugify(this.props.title),
    isScrolledIntoViewPerc(this.panelRef.current)
  )
}

让我知道是否需要添加更多详细信息。

报告视口中可见元素的百分比-函数使用React报告错误值

0 个答案: