Question

我试图用ReactJS做淡入博客文章。我最初的想法是只为每个<Post>组件添加滚动事件，并检查它是否在浏览器视图中（window.scrollY + window.innerHeight > this.post.offsetTop）

class Post extends React.Component {
  constructor(props) {
    super(props);

    this.scrollHandler = this.scrollHandler.bind(this);

    this.state = {
      fadeIn: '',
    };
  }

  componentDidMount() {
    window.addEventListener('scroll', this.scrollHandler);
    this.scrollHandler();
  }

  scrollHandler() {
    if (window.scrollY + window.innerHeight > this.post.offsetTop) {
      this.setState({
        fadeIn: styles.fadeIn,
      });

      window.removeEventListener('scroll', this.scrollHandler);
    }
  }

  render()

    return (
      <div className={`${styles.post} ${this.state.fadeIn}`} ref={(div) => { this.post = div; }}>
        Awesome article
      </div>
    );
  }
}

fadeIn样式只会改变元素的不透明度。一切正常。现在问题 - 有更好的方法吗？我不喜欢为每个元素滚动事件创建的想法。 IMO应该只有一个滚动事件（例如在父组件中），它将提供窗口位置数据，组件应该将它与它们的顶部位置进行比较。但不幸的是，我不知道如何使用ReactJS实现这一点。

Answer 1

    constructor(props){
    super(props);
    this.state = {
      isScroll: false
    }
}

handleScroll = () => {
    let winHeight = window.innerHeight;

    if (window.pageYOffset > winHeight){
      this.setState({
        isScroll: true
      })

    }
    else {
      this.setState({
        isScroll: false
      })

    }
  }

  scrollUp = () => {
    window.scroll({
      top: 0, 
      behavior: 'smooth' 
    })

  }

componentDidMount(){
    window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}

render() {
      return (
            {this.state.isScroll &&
                <div className="scroll-up" onClick={this.scrollUp}>top</div>
            }
        );
}

ReactJS组件在视口中时淡入

1 个答案: