text: javascript — Verwenden der Bildlaufanimation in React
  /Verwenden der Bildlaufanimation in React
  Was ist der korrekte Weg, um mit der Bildlaufposition in React umzugehen? Ich mag das reibungslose Scrollen wegen der besseren UX. Da das Manipulieren des DOM in React ein Anti-Pattern ist, bin ich auf ein Problem gestoßen: Wie kann ich reibungslos zu einer Position/einem Element scrollen? Normalerweise ändere ich den scrollTop-Wert eines Elements, aber dies ist eine Manipulation am DOM, die nicht zulässig ist.
  setTimeout(() => (this.node.scrollTop = i), i * 2);
  const someArrayToMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  <div ref={node => this.node = node} style={{overflow: 'auto', height: '100vh'}}>
  <button onClick={this.handleClick}>CLICK TO SCROLL</button>
  [...someArrayToMap,
  ...someArrayToMap,
  ...someArrayToMap].map((e, i) => <div key={i}>some text here</div>)
  Wie kann ich dies auf eine React Weise erreichen?
  05.06.2017 sympi
  Sie können einfach refs und die scrollIntoView-Methode verwenden (mit behavior: 'smooth' für einen reibungslosen Bildlauf). Es sind nur wenige Codezeilen und kein Paket erforderlich.
  Sagen Sie, dies ist das, zu dem Sie scrollen möchten
  <p ref={this.myRef} className="scrollToHere">[1] ...</p>
  Und irgendein Knopf
  <button onClick={() => {this.scroll(this.myRef)}} className="footnote">[1]</button>
  um die Scroll-Methode aufzurufen
  scroll(ref) {
  ref.current.scrollIntoView({behavior: 'smooth'})
  BEARBEITEN: Da diese Methode noch nicht von allen Browsern unterstützt wird ( Übersicht der Browserunterstützung ), möchten Sie möglicherweise eine polyfill verwenden.
  25.10.2018 bbrinx
  Es gibt mehrere Bibliotheken, um zu den Ankern in React zu scrollen. Die Auswahl hängt von den gesuchten Funktionen und dem vorhandenen Setup Ihrer Seite ab.
  React Scrollable Anchor ist eine einfache Bibliothek, die speziell für das Scrollen zu Ankern verwendet wird, die URL-Hashes zugeordnet sind. Außerdem wird der URL-Hash basierend auf dem aktuell fokussierten Abschnitt aktualisiert. [Vollständige Offenlegung: Ich bin der Autor dieser Bibliothek]
  React Scroll, in einer anderen Antwort erwähnt, ist eine umfassendere Bibliothek zum Scrollen zu Ankern, ohne die Position in der URL zu reflektieren.
  Sie können auch etwas anschließen wie React Router Hash Link Scroll wenn Sie bereits React Router verwenden, der dann auch in Ihren URL-Hash eingebunden wird.
  06.07.2017 gabergg
  Es gibt bereits ein paar gute Pakete, die das für Sie erledigen können:
  https://github.com/fisshy/react-scroll - Demo
  https://www.npmjs.com/package/react-scroll-to-component Ein einfacher Bildlauf zur Komponente
  05.06.2017 Chase DeAnda
  Ich mag die reag-router-Website in der API-Sektion, sie scheinen diese scrollToDoc-Komponente zu verwenden das ist eine wirklich süße Übersetzung einer typischen VanillaJS-Smooth-Scroll-Funktion in React, die von react-motion abhängt !