Heim > Web-Frontend > js-Tutorial > Wie scrolle ich zu einem Element in React?

Wie scrolle ich zu einem Element in React?

Linda Hamilton
Freigeben: 2024-11-14 09:37:02
Original
867 Leute haben es durchsucht

How to Scroll to an Element in React?

Wie scrolle ich zu einem Element?

Sie möchten, dass sich Ihr Chat-Widget automatisch auf die letzte Nachricht konzentriert, wenn neue Nachrichten geladen werden. Um dies zu erreichen, müssen Sie für jede Nachricht eine dynamische Referenz erstellen und mit einer Scroll-Funktion zum letzten Element scrollen.

So können Sie es machen:

React 16.8, Funktionskomponente

const ScrollDemo = () => {
  const myRef = useRef(null);

  const executeScroll = () => myRef.current.scrollIntoView(); // run this function from an event handler or an effect to execute scroll

  return (
    <>
      <div ref={myRef}>Element to scroll to</div>
      <button onClick={executeScroll}>Click to scroll</button>
    </>
  );
};
Nach dem Login kopieren

React 16.3, Klassenkomponente

class ReadyToScroll extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Element to scroll to</div>;
  }

  executeScroll = () => this.myRef.current.scrollIntoView(); // run this method to execute scrolling.
}
Nach dem Login kopieren

Klassenkomponente – Ref Rückruf

class ReadyToScroll extends Component {
  render() {
    return (
      <div ref={(ref) => (this.myRef = ref)}>Element to scroll to</div>
    );
  }

  executeScroll = () => this.myRef.scrollIntoView(); // run this method to execute scrolling.
}
Nach dem Login kopieren

Hinweise:

  • Vermeiden Sie die Verwendung von String-Referenzen, da diese veraltet sind.
  • Übergeben Sie ref an das DOM-Element, nicht an die React-Komponente.
  • Fügen Sie CSS hinzu, um eine reibungslose Scroll-Animation zu ermöglichen.

Das obige ist der detaillierte Inhalt vonWie scrolle ich zu einem Element in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage