Merhabalar,
Bu yazımda bazı blog, haber sitelerinde karşılaşabileceğiniz olan okumaya göre artıp, azalan ilerleme çubuğu (progress bar) yapımından bahsedeceğim.
Html, Css, Javascript üçlüsünü kullanarak bu işlemi gerçekleştireceğiz. Yine sayfanın tüm yüksekliğini ölçme, yüzde kaçında olduğu gibi tüm event işlemlerini Javascript tarafında yapacağız. Temel yapıdan başlayarak Html’ de çubuğu göstereceğimiz bir div oluşturalım.
<div id="cubuk"></div> İlerleme çubuğumuzu göstereceğimiz div elementini Html tarafına yerleştirdik. Şimdi sıra geldi bu ilerleme çubuğunun tasarımına. Güzel görünmek her ilerleme çubuğunun hakkı 🙂
#cubuk {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 5px;
z-index: 1000;
background: #a2214d;
} Sayfanın en üstüne sabit 5px yüksekliğe sahip olacak bir şekilde özel bir arka plan rengi vererek çubuğumuzu yerleştirdik. Şuanda hiçbir şey görünmeyecektir çünkü bir genişliği bulunmamaktadır.
O yüzden Javascript tarafına geçme zamanımız geldi.
function guncelle(){
// scroll neredeyse sayfanın yüksekliğine oranla
// çubuğumuzun genişliğini ayarlayacak fonksiyonu tanımlıyoruz
let cubuk = document.getElementById('cubuk'), // id'si cubuk olan elementi alıp cubuk degişkenine atıyoruz
elem = document.documentElement,// document uzerinden documentelement objesine daha hızlı ulaşmak için onu da degişkene atıyoruz
yukseklik = elem.scrollHeight, // tüm sayfanın yüksekliğini alıp yukseklik değişkenine atıyoruz
docBody = document.body, // document üzerinden body elementini değişkene atıyoruz
scrollTop = elem['scrollTop'] || docBody['scrollTop'], // element veya body'nin dikey olarak pozisyonu
scrollBottom = (elem['scrollHeight'] || docBody['scrollHeight']) - window.innerHeight, // tüm sayfanın yüksekliğinden pencerenin yüksekliğini çıkart
scrollPercent = scrollTop / scrollBottom * 100 + '%'; // çubuğun genişliğini ayarlayan bölme işlemi
cubuk.style.width = scrollPercent // cubuk id'li elemente genişlik yüzdesini ver
};
// her scroll eventi olduğunda yukarıda tanımladığımız guncelle fonksiyonunu çağırıyoruz
window.addEventListener('scroll', guncelle);Javascript tarafında da işlemimiz yukarıdaki gibi olmaktadır. Her satırın ne işlev gördüğünü kod içerisinde yorum satırında özetle anlatmaya çalıştım. Yazı, haber paylaştığınız veya sizden yapılması istenen bir sitede bu özelliği kolaylıkla yukarıdaki kodlar sayesinde kullanabilirsiniz.
Codepen üzerinden de canlı olarak test edebilmeniz için paylaşım yaptım inceleyebilirsiniz.
Umarım anlaşılır olmuştur ve bir gün işinize yarar.
Mutlu Kodlamalar 🙂
