Problèmes lors de la mise en œuvre du plafond d'onglets à l'aide de React.js

Il existe une exigence dans le développement du projet React selon laquelle lorsque la page défile jusqu'à l'emplacement de l'onglet, l'onglet doit être fixé en haut.

L'idée d'implémentation est en fait très simple, qui consiste à déterminer quand la distance de défilement scrollTop est supérieure à la distance entre l'onglet et le haut de la page offsetTop, et à changer la position de l'onglet en fixe.

Dans React, je définis un attribut navTop dans l'état, je change la valeur de cet attribut sur true ou false, puis j'utilise la méthode classnames() sur la balise tab pour ajouter le nom de classe corrigé en utilisant la valeur de navTop.

Au début, j'ai écrit comme ceci :

import cs from 'classnames';

class FixedTab extends React.Component{
  constructor(props){
      super(props);      
      this.state = {
        navTop: false
      }      this.$tab = null;      this.offsetTop = 0;
  }

  componentDidMount(){    this.$tab = this.refs.tab;    if(this.$tab){      this.offsetTop = this.$tab.offsetTop;
      window.addEventListener('scroll',this.handleScroll);
    }
  }

  handleScroll(){
    let sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;    if(sTop >= this.offsetTop){       this.setState({
         navTop: true
       })
    }    if(sTop < this.offsetTop){       this.setState({
         navTop:false
       })
    }
  }

  render(){    return(       <p ref="tab" className={cs({&#39;fixed&#39;:this.state.navTop})}></p>    )
  }  
}

Ensuite, j'ai découvert qu'il y avait un problème avec l'écriture comme celle-ci lorsque la distance de défilement de mon parchemin. La barre a atteint l'état, la languette a eu un effet plafond-plafond, mais elle s'est rétablie en un instant et la barre de défilement a également rebondi, rendant impossible de continuer à tirer vers le bas.

Au début, j'ai pensé qu'il y avait un problème avec la logique de jugement, mais je n'ai jamais pu trouver de solution. Plus tard, j'ai soupçonné que cela était dû à la différence de temps entre les changements de valeur d'état. une boucle infinie, puis je jugeais la distance de défilement. Auparavant, une fonction était ajoutée pour déterminer l'état de navTop.

Le code principal modifié est le suivant :

handleScroll(){
    let sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;    if(!this.state.navTop && sTop >= this.offsetTop){       this.setState({
         navTop: true
       })
    }    if(sTop < this.offsetTop){       this.setState({
         navTop:false
       })
    }
  }

Après cette modification, l'effet plafond sera normal.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!