Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
35 lines (22 sloc) 2.82 KB
layout title date author comments category tags
post
Angular ile sayfanın en altına geldiğini anlamak (Sonsuz -infinite- scroll)
2017-09-10 12:00
engin.polat
true
Web
html5
angular
scroll
infinite
window
command prompt
terminal
javascript
ng
new
window
scroll
event
attach
innerHeight
document
documentElement
offsetHeight
body
scrollHeight
clientHeight
math
max
component
selector
export
class
addEventListener
function

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;

<script src="https://gist.github.com/polatengin/313a5d84fc428046b8be6947beda9405.js?file=angular-command.ps1"></script>

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;

<script src="https://gist.github.com/polatengin/313a5d84fc428046b8be6947beda9405.js?file=app.component.ts"></script>