javascript - 在到达终点之前触发滚动功能？

Question

import React, { Component } from 'react';
import './App.css';

import Home from './Components/Home/Home';
import Explainers from './Components/Explainers/Explainers';
import VideoCreation from './Components/VideoCreation/VideoCreation';
import Video from './Components/Video/Video';
import Footer from './Components/Footer/Footer';


class App extends Component {
  constructor(props){
    super(props);
    this.state = {isExplainers:false, isVideoExp:false }
    this.handleScroll = this.handleScroll.bind(this);
  }
   componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
   componentWillUnMount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll=()=>{
    console.log("scroll handle")
    this.setState({isExplainers:true});
    window.addEventListener('scroll', this.videoScroll);
  }
  videoScroll = () =>{
    console.log("scroll of Video");
    this.setState({isVideoExp:true});
    window.addEventListener('scroll', this.ourVideoScroll);
  }
  ourVideoScroll=()=>{
    console.log("our Video Scroll");
  }
  render() {
    const explainersClass = this.state.isExplainers ? "explainerAfter" : "explainer";
     const creationClass = this.state.isVideoExp ? "videoCreationAfter" : "videoCreation";
     const ourVideoClass = this.state.isExplainers ? "videoCreationAfter" : "videoCreation";
    return (

      <div className="App">
      <Home  onScroll = {this.handleScroll}/>
      <div className={explainersClass} onScroll={this.videoScroll}><Explainers /></div>
      <div className={creationClass} onScroll={this.ourVideoScroll}><VideoCreation /></div>
      <div className={ ourVideoClass } > <Video /></div>
      <Footer /> 
      </div>
    );
  }
}

export default App;

在此我有三个 onScroll 函数，其中我需要一个接一个地工作的功能，一旦它到达组件的末尾就应该更新所有都立即更新我的代码有什么错误吗？或使用其他框架或其他方式执行此操作的任何其他形式或方法？

Answer 1

您不需要为每个函数添加滚动事件，而是可以从上一个函数调用它。此外，由于 setState 是异步的，您可以从 setState 完成后执行的 setState 回调中调用这些函数

class App extends Component {
  constructor(props){
    super(props);
    this.state = {isExplainers:false, isVideoExp:false }
    this.handleScroll = this.handleScroll.bind(this);
  }
   componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
   componentWillUnMount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll=(e)=>{
    console.log("scroll handle");
    const explainer = React.findDOMNode(this.explainer);
    const home = React.findDOMNode(this.home);
    if(home.scrollTop === explainer.offsetTop) { 
       this.setState({ isExplainers : true });
    }
  }
  videoScroll = () => {
    const explainer = React.findDOMNode(this.explainer);
    const video = React.findDOMNode(this.video);
    if(explainer.scrollTop === video.offsetTop) { 
       this.setState({ isVideoExp : true });
    }
  }
  ourVideoScroll=()=>{
    console.log("our Video Scroll");
    const ourVideo = React.findDOMNode(this.ourVideo);
    const video = React.findDOMNode(this.video);
    if(video.scrollTop === ourVideo.offsetTop) { 
       // take action here
    }
  }
  render() {
    const explainersClass = this.state.isExplainers ? "explainerAfter" : "explainer";
     const creationClass = this.state.isVideoExp ? "videoCreationAfter" : "videoCreation";
     const ourVideoClass = this.state.isExplainers ? "videoCreationAfter" : "videoCreation";
    return (

      <div className="App">
      <Home  ref={ref => this.home = ref} onScroll = {this.handleScroll}/>
      <div className={explainersClass} ref={ref => this.explainer = ref} onScroll={this.videoScroll}><Explainers /></div>
      <div className={creationClass} ref={ref => this.video = ref} onScroll={this.ourVideoScroll}><VideoCreation /></div>
      <div className={ ourVideoClass } ref={ref => this.ourVideo = ref}> <Video /></div>
      <Footer /> 
      </div>
    );
  }
}

export default App;