Yasal Uyarı-Bu yazının yazıldığı sırada yalnızca Chrome tarayıcısını hedefliyordum.

Bir kullanıcı kaydırma yaptığında, varsayılan olarak ever browser'da yerleşik bir olay olan bir DOM kaydırma olayı tetiklenir. React, kaydırma olayı tetiklendiğinde herhangi bir bileşende çağrılabilen kendi yöntemi olan Onscroll'a sahiptir. Bu onScroll yöntemini kullanarak, bir kullanıcı kaydırma işleminin sonucu olarak bir işlevi çağırabiliriz.

Örnek;

<SomeComponent onScroll={someMeothod} />

Herhangi bir DOM olayında olduğu gibi, olay hakkında yararlı bilgiler sağlayabilecek özelliklere sahip bir olay nesnesi oluşturulur ve söz konusu olay öğesi de ilişkilidir. Bir kullanıcının kaydırdığı her piksel için bir kaydırma olayı tetiklenir. Bu durumda, yalnızca kullanıcının içeriğimizi içeren üst öğenin sonuna ne zaman kaydırdığını belirlemekle ilgileniriz.

Kullanıcı bir kapsayıcının sonuna kaydırıldığında hesaplama

Components sınıfında bir işlevi çağıran içerik içeren öğeye bir onScroll yöntemi ekleyin:

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

Ardından kaydırma olayını işlemek için handleScroll işlevini oluşturun:

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>
    )
  }
}

İşleri biraz daha net hale getirmek için handleScroll yönteminde neler olup bittiğini parçalayalım…

e-bu olayın kendisine karşılık gelir. Çalıştığımız kaydırma olayıyla ilgili özelliklere sahip tarayıcı tarafından oluşturulan bir nesnedir.

let element = e. target-bu, olayı (e.target) kullanarak gönderen öğeyi bulmamızı ve kodun geri kalanında kullanabileceğimiz değişkene atamamızı sağlar.

Artık (kodumuz) hangi öğenin kaydırıldığını biliyoruz ve onu yöntemler kapsamımızdaki bir değişkene atadık, tarayıcı tarafından verilen öğenin özelliklerine erişebilir ve kullanıcının sonuna kadar kaydırıp kaydırmadığını hesaplayabiliriz.

öğe.scrollHeight-bu, css taşması nedeniyle ekranda görünmeyen içerik de dahil olmak üzere öğe içeriğinin piksel cinsinden yüksekliğidir.

öğe.scrollTop-bir öğenin içeriğinin dikey olarak kaydırıldığı piksel cinsinden yükseklik.

öğe.clientHeight-öğenin kaydırılabilir kısmının piksel cinsinden yüksekliği.

Yukarıdaki özellikleri kullanarak, kullanıcının scrollHeight ve scrollTop öğesinin negatif toplamını clientHeight ile karşılaştırarak öğenin altına kaydırıp kaydırmadığını hesaplayabiliriz. Bunlar aynıysa, kullanıcı öğenin altına kaydırdı. Bunu bir kutuya sararak if Açıklama Bu fonksiyon içinde if deyimini kapsamı sadece kullanıcı dıv sonuna kaydırılan zaman çalıştırılırsa ve biz gerçekten emin miyiz if koşul.