为什么我的组件在 React.js 中的 offsetTop = 0？

问题描述

我创建了一个组件，可以在元素滚动时为其设置动画。

代码：

import React from 'react';
import './FadeText.css';

const FadeText = ({ datatarget = 'right',children,...props }) => {
  const ref = React.createRef(null);

  const debounce = function (func,wait,immediate) {
    var timeout;
    return function () {
      var context = this,args = arguments;
      var later = function () {
        timeout = null;
        if (!immediate) func.apply(context,args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later,wait);
      if (callNow) func.apply(context,args);
    };
  };

  const onScroll = debounce(function () {
    const element = ref.current;
    console.log(element);
    const windowTop = window.pageYOffset + window.innerHeight * 0.75;
    console.log(windowTop);
    if (windowTop > element.offsetTop) {
      element.classList.add('animate');
    } else {
      element.classList.remove('animate');
    }
  },75);

  React.useEffect(() => {
    window.addEventListener('scroll',() => onScroll(),{});
  },[onScroll]);

  return (
    <div ref={ref} datatarget={datatarget} {...props}>
      {children}
    </div>
  );
};

export default FadeText;

第一个元素带有普通的 offsetTop，但我使用组件的其他元素的 offsetTop 为 0。我也使用了 getBoundingClientRect()，但它没有找到最好的方法......>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）