Bu makaleyi okumadan önce Angular etiketindeki diğer makalelerimi okumanızı tavsiye ederim.

Bazı web sitelerinde sitenin en altına indiğinizde yeni verilerin otomatik olarak yüklendiğini farketmişsinizdir.

Örneğin, facebook, twitter gibi uygulamalar sayfanın en altına gittiğinizde yeni post’ları sayfaya yükler.

Angular ile geliştirdiğimiz uygulamada biz de aynı şekilde sayfanın en altına geldiğimizde daha fazla veri yüklenmesini veya bir sonraki haberin sayfaya getirilmesini sağlayabiliriz.

Bunun için öncelikle bir Angular projesi oluşturmamız lazım, hemen Command Prompt (Windows) veya Terminal (MacOs, Linux) penceresi açalım ve aşağıdaki komutu girelim;

Sayfanın en altına kaydırıldığımızı anlayabilmek için javascript aracılığıyla erişebileceğimiz window nesnesinin scroll event‘ine attach‘lanmamız lazım.

Yapmamız gereken ilk iş, sayfanın yüksekliğini elde etmek. Bunun için, eğer window nesnesinin innerHeight özelliği varsa bu özelliğin değerini, yoksa, document nesnesinin documentElement özelliğinin offsetHeight değerini okumalıyız.

İkinci adımda, document nesnesinin body özelliğinde ve documentElement özelliğinde bulunan scrollHeight, offsetHeight, clientHeight özelliklerinden değeri en büyük olanı alıyoruz.

Artık tek yapmamız gereken, o anda scroll‘un bulunduğu pozisyonu, sayfanın yüksekliği ile karşılaştırmak ve sayfanın el altına gelip gelmediğimizi bu karşılaştırmadan elde etmek.

Eğer bu kodları herhangi bir Angular Component class‘ının constructor‘ına yazacak olursak ilgili sayfada scroll‘un en alta geldiği anı tespit edebiliriz.

Örneğin;