Angular ile sayfanın en altına geldiğini anlamak (Sonsuz -infinite- scroll)

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;

İlgili diğer makaleler

blog comments powered by Disqus

Engin Polat hakkında

Senior Software Engineer, @Microsoft

Ada ve Ege'nin babası ;)

Kategoriler

İstatistik

Makale Adedi: 484

Creative Commons Lisansı