Javascript 获取div的高度，而不是窗口的高度_Javascript_Reactjs

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

javascript reactjs

Javascript 获取div的高度，而不是窗口的高度,javascript,reactjs,Javascript,Reactjs,我有一个基于页面滚动的动画。我可以根据页面高度等来做，但是如何根据div高度/当它点击这个div时来做呢？因为这个div将更靠近页面底部，当您到达该div时，需要进行动画另外，我的div有一个类似so-className={styles.Section}的节 onScroll(scrollConfig) { const { defaultProgress, totalRowHeight, adjustProgress, totalCy } = scrollConfig; c

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

另外，我的div有一个类似so-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
    });
  }

onScroll（滚动配置）{
const{defaultProgress，totalRowHeight，adjustProgress，totalCy}=scrollConfig；
常量偏移=window.pageYOffset；
const wheight=窗内高度；
const html=document.documentElement；
const docheight=Math.max（document.body.scrollHeight，document.body.offsetHeight，
html.clientHeight、html.scrollHeight、html.offsetHeight）；
施工进度=偏移量/（八小时-小时）；
//根据滚动位置获取pos计数
const pos=默认进度+13+进度*（总行高-调整进度）；
this.notes.map（（obj，index）=>{
const node=this.notes[index].ref.current；
const notecoffset=node.getBoundingClientRect（）；
const rowHeight=notefset.height；
obj[“行高”]=行高；
obj[“circleStrokeColor”]=pos总高度？总高度：位置
});
}

HTMLElement.offsetHeight

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

HTMLElement.offsetTop

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

HTMLElement.offsetHeight

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

HTMLElement.offsetTop

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

这听起来是最适合的。使用IO，您可以观察图元，并在图元进入视图、离开视图或与其他图元相交后对其作出反应

它的性能也比使用

scroll

event要高得多

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

let options = {
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

在这里，

回调

函数将在元素100%进入视图或离开视图时被调用。您还可以指定一个根元素，然后一旦该元素与该根元素相交，就会触发回调

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

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);
});

最后，您必须指定触发观察者后发生的情况：

let callback = (entries, observer) => { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

如果只想触发一次，也可以

还有一种支持旧浏览器的方法。此polyfill使用滚动事件来模拟行为

最后，有一个，我认为这显示了你想要的输出？（向下滚动，直到看到图像变为动画）

这听起来像是一个完美的选择。使用IO，您可以观察图元，并在图元进入视图、离开视图或与其他图元相交后对其作出反应