web-dev-qa-db-fra.com

Comment révéler un composant React on scroll

J'ai créé un composant React pour une navigation fixe que je voudrais garder caché, jusqu'à ce que je fasse défiler un certain point de la page, puis que je glisse en vue. Moyen a un en-tête similaire à ce que je décris.

C'est une tâche relativement triviale dans jQuery , avec scrollmagic ou waypoints, mais existe-t-il un moyen idiomatique d'accomplir cela avec React et Vanilla JS?

javascriptreactjsscroll
14
Wilhelm

React Way avec Vanilla JS jsfiddle ;

n'oubliez pas de supprimer EventListener. Dans cet exemple, le composant sera rendu si seulement il est nécessaire

class TopBar extends React.Component {
    state = { isHide: false };

    hideBar = () => {
       const { isHide } = this.state

       window.scrollY > this.prev ?
       !isHide && this.setState({ isHide: true })
       :
       isHide && this.setState({ isHide: false });

       this.prev = window.scrollY;
    }

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

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

    render(){
        const classHide = this.state.isHide ? 'hide' : '';
        return <div className={`topbar ${classHide}`}>topbar</div>;
    }
}
15
Kokovin Vladislav

Vous pouvez utiliser un composant tel que react-headroom pour faire le gros du travail pour vous. Ou, vous pouvez toujours utiliser des waypoints dans React, en le configurant dans componentDidMountméthode du cycle de vie et en le supprimant en utilisant componentWillUnmount.

8
Peteris Bikis

J'ai créé un composant React pour ce même besoin exact car je n'ai trouvé aucune autre implémentation correspondant à ce dont j'avais besoin. Même react-headroom ne vous a pas donné quelque chose qui défilerait juste après avoir atteint un certain point sur la page.

The Gist est ici: https://Gist.github.com/brthornbury/27531e4616b68131e512fc622a61baba

Je ne vois aucune raison de copier le code du composant ici. Le code est largement basé sur le react-headroom code mais fait moins et est donc plus simple.

Le composant est le premier morceau de code, vous pouvez simplement copier/coller puis l'importer. Après avoir importé votre code avec la barre de navigation, cela ressemblerait à ceci:

class MyScrollInNavBar extends Component {
    render() {
      return (
        <ScrollInNav scrollInHeight={150}>
          <MyNavBar />
        </ScrollInNav>
      );
    }
}
0
brthornbury

Dans le hook de cycle de vie componentDidMount, faites la même chose que dans le lien jQuery que vous avez donné:

class Navbar extends React.component {

  let delta = 5;

  render() {
    return (
      <div ref=header></div>
    );
  }

  componentDidMount() {
    $(window).scroll(function(event){
      var st = $(this).scrollTop();

      if(Math.abs(this.state.lastScrollTop - st) <= delta)
        return;

      if (st > lastScrollTop){
        // downscroll code
        // $(this.refs.header).css('visibility','hidden').hover ()
        this.setState({
          navbarVisible: false
        });
      } else {
        // upscroll code
        $(this.refs.header).css('visibility','visible');
        this.setState({
          navbarVisible: true
        });
      }
      lastScrollTop = st;
    }.bind(this));

  }
}
0
Piyush.kapoor