webentwicklung-frage-antwort-db.com.de

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.

JSBIN

code:

import React from 'react';
import ReactDOM from 'react-dom';


class App extends React.Component {
  handleClick = e => {
    for (let i = 1; i <= 100; i++) {
      setTimeout(() => (this.node.scrollTop = i), i * 2);
    }
  };

  render() {
    const someArrayToMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    return (
      <div ref={node => this.node = node} style={{overflow: 'auto', height: '100vh'}}>
        <button onClick={this.handleClick}>CLICK TO SCROLL</button>
        {
            [...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap].map((e, i) => <div key={i}>some text here</div>)
        }
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

Wie kann ich dies auf eine React Weise erreichen?

11
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

class App extends Component {
  constructor() {
    super()
    this.myRef = React.createRef();

  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. 

8
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.

1
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

Hoffe das hilft!

1
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 !

0
PaulCo

window.scroll({top: 0, left: 0, behavior: 'smooth' }) arbeitet für mich.

Sie müssen auch nach Browserkompatibilität suchen

Oder benutze polyfill

0
transang