Javascript ile Kaydırma Göstergesi Nasıl Oluşturulur?

javascript ile kaydırma göstergesi oluşturma, bir blogun görünümünü özelleştirmek ve güzelleştirmek için blog sayfasının başlangıcından sonuna kadar duyarlı kaydırma göstergesi oluşturmanın bir yoludur. Bu, blog sayfasının üst kısmında yer alan ve kaydırma göstergesi ile sayfanın neresinde olduğunu gösteren bir çizgidir.

Bu kaydırma göstergesi, blog sayfasının üst kısmına gizlenen ve sayfa aşağı doğru kaydırıldığında gösterge sağa doğru kayacak, sayfa yukarı doğru kaydırıldığında kaydırma göstergesi sola doğru kayacak şekilde renkli olarak görüntülenir.

Blogger Okuma İlerleme Çubuğu Göstergesi

Kaydırma göstergesi, yalnızca bir kaç satır saf (ham) javascript ile oluşturulmuştur. Bu nedenle, herhangi bir JS kütüphanesi (komut dosyası) kullanmanız gerekmez.

Blog sitenizde kaydırma göstergesi kullanıyorsanız ve sayfa yüklenme hızına etki ediyorsa ve sayfa sorgu sayısını artırıyorsa bu eklentiyi kullanmanızı öneriyorum. Özellikle blog sitesinde çok fazla komut dosyası varsa bu tür javascript kullanmanız daha faydalı olacaktır.

Ön İzleme

Kaydırma göstergesini blog sitenize eklemek istiyorsanız aşağıdaki adımları takip edin.

Aşağıdaki CSS kodlarını blog sitenizin stil (<style>) dosyası içerisine ekleyin.

CSS

.progress-container {
    background:#24272e;
    position:fixed;
    width:100%;
    height:3px;
    top:0;
    left:0;
    z-index:9999
}
 .progress-bar {
    background:#f44336;
    width:0%;
    height:3px
}

CSS kodu içerisinde belirtilen renk kodlarını blog sitenizin arka plan rengine uyum sağlayacak şekilde değiştirebilirsiniz.

.progress-container kaydırma göstergesinin olduğu yer ve .progress-bar soldan sağa kayan kaydırma göstergesidir.

Aşağıdaki HTML ve javascript kodunu </body> kodunun bir satır üzerine ekleyin.

HTML ve Javascript

<div class="progress-container">
    <div class="progress-bar" id="progress" />
</div>

<script>
//<![CDATA[
window.addEventListener("scroll", scrollBar);

function scrollBar() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("progress").style.width = scrolled + "%";
}
//]]>
</script>

Hepsi bu kadar. Blog kaydırma göstergesi ile ilgili daha fazla bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.