web-dev-qa-db-fra.com

Comment ajouter une barre de défilement à un composant dans React?

J'utilise un système de grille avec 3 colonnes dans mon SPA. La liste de gauche et de droite contient des composants qui occupent 100 de la hauteur de la fenêtre. La colonne du milieu contient une longue liste et souhaite ajouter une barre de défilement uniquement au composant du milieu. J'ai essayé de tisser le composant central avec plusieurs composants de barre de défilement différents, mais rien ne fonctionne. Je me retrouve toujours avec un défilement de la page principale qui ne me laisse que le composant liste lorsque le défilement plus bas et les composants gauche et droit restent en haut de la page.

cssreactjsscrollbar
3
Kleo

Essayez d'ajouter overflow-y: scroll; sur le composant central

const items = [...Array(100)].map((val, i) => `Item ${i}`);

const App = () => (
  <div className="container">
    <div className="left-col">
      Left col
    </div>
    
    <div className="center-col">
      <span>List</span>
      <ul>
        {items.map((item, i) => (<li key={`item_${i}`}>{ item }</li>))}
      </ul>
    </div>
    
    <div className="right-col">
      Right col
    </div>
  </div>
);

ReactDOM.render(<App />, document.getElementById('react'));
.container {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.left-col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ddd;
}

.center-col {
  flex: 1;
  background: #aaa;
  overflow-y: scroll;
}

.right-col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e7e7e7;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="react"></div>
4
inaumov17

Trouvé la solution, besoin de régler la hauteur fixe sur les composants gauche et droit et le débordement: faites défiler jusqu'au composant du milieu.

0
Kleo