Yazılım

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

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

Örneğin, facebooktwitter 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 (MacOsLinux) 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 scrollHeightoffsetHeightclientHeight ö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.

 

 

 

 

 

Click to comment

CEVAP BIRAKIN

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Copyright © 2018 Web Sitesi üzerinde yayınlanan tüm içerikler www.ogzblg.com sitesine aittir. Toplist 25

To Top