Bu yazımda Javascript ile Scroll İşlemleri konusunda basit bir giriş yapacağım Scroll ile yapabileceğimiz basit bir uygulama yapacağım. Bu yapacağım uygulama aşağı doğru kaydırdıkça sayfaya yeni içerik eklemekten bahsedeceğim.

Öncelikle oluşturduğum basit bir tasarımı göstermem gerekli.

Oluşturduğumuz tasarım.

Şimdi Javascript kodlarını sizlerle paylaşayım daha sonra bu kodların ne işe yaradığından bahsedeyim.

function sonsuzsayfa()
{
var main = document.getElementById(‘main’);
var cHeight = main.offsetHeight;
var yOffSet = window.pageYOffset;
var y = yOffSet + window.innerHeight;
if(y >= cHeight){
main.innerHTML += (‘<div id=”eklenen”>Aydın Can Altun</div>’);
}
}
window.onscroll = sonsuzsayfa;

Şimdi bu kodların ne işe yaradıklarından bahsedeyim

window.onscroll = sonsuzsayfa;

sayfa yukarıya ve ya aşağıya oynatılırken sonsuzsayfa adındaki fonksiyonu çalıştırmamızı sağlar.

Şimdi ise sonsuzsayfa fonksiyonumuzun ne yaptığına bakalım.

var main = document.getElementById(“main”);

Bu kod ile main adında oluşturduğumuz değişkenin içine sayfamızın içinde id’si main olan etiketin verilerini tutmamızı sağlar.

var cHeight = main.offsetHeight;

Bu kod ise cHeight adını verdiğimiz değişkenin içine main değişkeninde seçilen etiketin dikey olarak hangi uzunluğunda olduğumuzu tutar.

var yOffSet = window.pageYOffset;

Bu kod bize sayfanın dikey olarak ne kadar aşağı ve ya yukarı oynatıldığını pixel cinsinden verir.

var y = yOffSet + window.innerHeight

İşte burası aslında önemli olan kısım burada y değişkenine yukarı ve aşağıya ne kadar oynatıldığını ve kullandığınız tarayıcının kapladığı alan hesaplanmadan gördüğünüz sayfanın uzunluğunun boyutlarını toplar

if(y >= cHeight){
main.innerHTML += (‘<div id=”eklenen”>Aydın Can Altun</div>’);
}
}

Burada ise bir kontrol yapıyoruz eğer y değişkenimizde belirtilen değer bizim seçtiğimiz elementin uzunluk olarak sonuna geldiğinde bu elementin sonuna yeni bir html kodu eklemesini sağlar böylece aşağı indikçe yeni verilerin eklenmesini sağlarız.

Bu işlem peki ne işimize yarar diye soracak olursanız Facebook’da görmüş olduğunuz sayfayı aşağı indikçe sürekli olarak gönderilen eski paylaşımları görmeye başlarız işte bu tarz bir işlem kendi internet sitenizde yapmak istiyorsanız bu sistemi kullanmanız işinize her türlü yarayacaktır.

Sonuç olarak elde ettiğimiz görüntü şöyle olacaktır.

Yaptığımız Uygulamanın Görüntüsü

Bu Javascript uygulamasında Javascript ile Scroll İşlemlerini basit bir örnek ile bahsettik. Yaptığımız uygulama üzerinde değişiklik yaparak daha farklı şeyler yapmaya başlayabilirsiniz. Javascript ile yaptığım diğer uygulamaları görmek için tıklayınız.