Question

我有一个基于页面滚动的动画。我可以根据页面高度等进行操作。但是，如何根据div的高度/当它达到此div时如何进行处理呢？因为div将更靠近页面底部，并且到达该div时需要进行动画处理。

P.S。我的div具有像这样分配的Section-className = {styles.Section}

  onScroll(scrollConfig) {
    const { defaultProgress, totalRowHeight, adjustProgress, totalCy } = scrollConfig;
    const offset = window.pageYOffset;
    const wheight = window.innerHeight;
    const html = document.documentElement;
    const docheight = Math.max(document.body.scrollHeight, document.body.offsetHeight,
      html.clientHeight, html.scrollHeight, html.offsetHeight);
    const progress = offset / (docheight - wheight);

    // Get pos count based on scroll position

    const pos = defaultProgress + 13 + progress * (totalRowHeight - adjustProgress);

    this.notes.map((obj, index) => {
      const node = this.notes[index].ref.current;
      const noteOffset = node.getBoundingClientRect();
      const rowHeight = noteOffset.height;
      obj["rowHeight"] = rowHeight;
      obj["circleStrokeColor"] = pos < obj.cy ? style.beforeColor : style.afterColor;
    });
    // console.log(adjustHeight, pos);

    this.setState({
      afterLineHeight: pos > totalCy ? totalCy : pos
    });
  }

Answer 1

HTMLElement.offsetHeight //只读属性以整数形式返回元素的高度，包括垂直填充和边框。

HTMLElement.offsetTop //只读属性返回当前元素相对于offsetParent节点顶部的距离。

Answer 2

这听起来像是Intersection Observer (IO)的理想人选。使用IO，您可以观察元素并在它们进入视图，离开视图或与其他元素相交后对其做出反应。

与使用.view-frame { height: auto; overflow-y: auto; overflow-x: hidden; display: block; position: absolute; bottom: 0; top: 0; left: 0; right: 0; margin-top: 20px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; z-index: 999999999; } .scrollbar-y { overflow-y: auto !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; }事件相比，它的性能也更高。

首先，您必须为IO设置选项，并使用以下选项创建新的观察者：

scroll

这里let options = { rootMargin: '0px', threshold: 1.0 } let observer = new IntersectionObserver(callback, options);函数将在元素100％进入视图或离开视图时被调用。您还可以指定一个根元素，然后一旦该元素与该根元素相交，就会触发回调。

然后，您必须指定要观察的元素：

callback

最后，您必须指定触发观察者后会发生什么：

let targets = document.querySelectorAll('.elements');
targets.forEach(target => {
  // if you only have 1 element (like with document.getElementById) you can call .observe directly
  observer.observe(target);
});

如果您只想触发一次，也可以unobserve an element。

还有一个polyfill from w3c支持较旧的浏览器。该polyfill使用滚动事件来模仿行为。

最后，有一个look at this example，我认为这显示了您想要的输出？（向下滚动，直到看到图像变得生动起来）

获取div的高度而不是窗口的高度

2 个答案: