Implementieren Sie die Scrollbar-Funktion in React

React ist eine beliebte Front-End-Bibliothek, da Sie damit ohne großen Aufwand eine benutzerfreundliche Oberfläche implementieren können.

Eines der häufigsten Probleme ist es, große Datenmengen benutzerfreundlich darzustellen. Die Bildlaufleiste ist eine einfache und benutzerfreundliche Lösung für den Umgang mit Datenüberlauf.

In diesem Handbuch werden wir untersuchen, wie Sie Bildlaufleisten auf einzelne Komponenten in React anwenden.

Implementieren der Bildlaufleiste in React

Es gibt mehrere Möglichkeiten, mit zu vielen Inhalten in React umzugehen. Der einfachste Weg, die Scrollbar-Funktion zu implementieren, ist über CSS.

In diesem Beispiel haben wir eine Eltern- und eine Kindkomponente. Wir geben dem Hauptcontainer in der Komponente <Section> einen className-Wert von section.

export default function App() {
  return (
    <div className="App">
      <Section>
        some text
      </Section>
      <Section>
        some text
      </Section>
      <Section>
          some text
      </Section>
    </div>
  );
}
function Section(props) {
  return <div className="section">{props.children}</div>;
}

Dann können wir zu CSS gehen und Stile auf die untergeordnete Komponente anwenden.

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  justify-content: space-between;
  height: 100vh;
}

.section {
  border: 2px solid red;
  width: 30%;
  font-size: 20px;
  overflow-y: scroll;
}

Die CSS-Eigenschaft overflow-y ist hier die wichtigste. Wenn Sie ihm den Wert scroll zuweisen, wird HTML angewiesen, eine Bildlaufleiste zu erstellen, wenn der Inhalt (in diesem Fall Text) nicht in den Container passt.

Da die Eigenschaft overflow-y die y-Achse angibt, betrifft dies nicht die Breite, sondern nur die Höhe.

Ohne diese Eigenschaft würde der Text über die Grenzen der Komponente hinausgehen.

Sie können zu dieser Live-Demo auf CodeSandbox gehen und sehen, wie sich die Anwendung dieser Eigenschaft auswirkt.

Wir haben drei <Section>-Komponenten. Der erste enthält zu viel Text, der nicht in seine normale Größe passt.

Es verfügt also über eine Bildlaufleiste, mit der Sie nach unten scrollen können, um den vollständigen Text anzuzeigen. Die mittlere Komponente enthält nicht zu viel Text, sodass Sie nicht nach unten scrollen müssen.

Die letzte Komponente ermöglicht es Ihnen, ähnlich wie die erste nach unten zu scrollen.

Sie können diese CSS-Eigenschaft verwenden, um Bildlaufleisten selektiv nur auf Komponenten anzuwenden, die sie benötigen. Sie können dasselbe für die übergeordnete Komponente tun.