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

Question

我有一个基于页面滚动发生的动画。我可以根据页面高度等来做到这一点。但是我如何根据 div 高度/当它点击这个 div 时做到这一点？因为 div 会更靠近页面底部，并且当您到达该 div 时需要发生动画。

附注我的 div 有这样分配的部分 - 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 节点顶部的距离。