Upozornění - V době psaní jsem byl pouze na prohlížeči Chrome.

Když uživatel roluje DOM scroll událost je spuštěna, událost, která je integrována do prohlížeče ve výchozím nastavení. Reagovat má vlastní metoda, onScroll, který může být nazýván na každém komponentu, kdy scroll událost je aktivována. Pomocí tohoto onScroll metodu můžeme volat funkci jako výsledek uživatel rolování.

Příklad;

<SomeComponent onScroll={someMeothod} />

Jako s jakýmkoli DOM událost, událost, je vytvořen objekt s vlastnostmi, které mohou poskytnout užitečné informace o události a prvek, řekl, že událost souvisí taky. Svitek událost je aktivována pro každý pixel uživatel svitky. V tomto případě jsme se pouze o identifikaci, když má uživatel rolovat na konec nadřazený prvek obsahující náš obsah.

Výpočtu, kdy má uživatel rolovat na konec kontejneru

Přidat onScroll metodu na prvek obsahující obsah, který volá funkci na komponenty třídy:

<div className="content-container" onScroll={this.handleScroll}>
  // Your content
</div>

Pak vytvořit handleScroll funkce zvládnout scroll událost:

class MyComponent extends React.Component {
  handleScroll = e => {
    let element = e.target
    if (element.scrollHeight - element.scrollTop === element.clientHeight) {
      // do something at end of scroll
    }
  }
  render() {
    return (
      <div className="content-container" onScroll={this.handleScroll}>
        // Your content
      </div>
    )
  }
}

Pojďme rozebrat, co se děje v handleScroll způsob, jak dělat věci trochu jasnější...

e - to odpovídá samotné události. To je objekt, který je vytvořen prohlížeč s vlastnosti související s scroll případě pracujeme s.

dovolte prvek = e.cíl - to nám umožňuje najít prvek, který vyslal událost pomocí (e.cíl) a přiřadit ji proměnné, které můžeme použít ve zbytku kódu.

Teď jsme (náš kód) ví, který prvek je posouvat a přiřadili jsme je do proměnné v našem metody působnosti, můžeme přístup k vlastnosti prvku dána prohlížeče a spočítat, pokud má uživatel posouvá až na konec.

prvek.scrollHeight - to je výška v pixelech prvků obsahu, včetně obsahu, které nejsou viditelné na obrazovce, vzhledem k css overflow.

prvek.scrollTop - výška v pixelech, který prvek je obsah posouvat svisle.

prvek.clientHeight - výška v pixelech rolovací část prvku.

Pomocí výše uvedené vlastnosti, můžeme vypočítat, pokud má uživatel rolovat na spodní části prvku porovnáním negativní součet scrollHeight a scrollTop na clientHeight. Pokud jsou stejné, uživatel má posouvat na spodní části prvku. Balení v if prohlášení, proto můžeme zajistit, že naše funkce v if prohlášení, že je oblast působnosti spustit pouze, když uživatel posouvá až na konec div a naše if podmínka je splněna.