Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için modern bir tarayıcı (Chrome, Firefox, Edge veya Safari) ve temel seviyede Html ve Css bilginizin olması yeterlidir. 2026 standartlarına uygun olarak, CSS'in güncel `position: fixed` ve `width` özelliklerini kullanacağız. Herhangi bir derleyiciye veya kurulum gerektiren bir araca ihtiyacınız yoktur; sadece bir metin editörü (VS Code gibi) yeterlidir.

Başlamadan önce çalışma dizininizde bir index.html ve bir style.css dosyası oluşturduğunuzdan emin olun. Bu yapı, kodun temiz kalmasını ve yönetilebilir olmasını sağlar.

Adım 1: HTML Yapısını Oluşturma

Sayfa kaydırma göstergesi, sayfanın en üstünde sabit duran bir elementtir. Bu elementi sayfa içeriğinden bağımsız olarak en üst düzeyde tanımlamak, z-index yönetimi açısından en sağlıklı yöntemdir.

  





  
Eğitim Makalesi Başlığı
  
İçerik buraya gelecek...

Burada scroll-container, çubuğun arka planını temsil ederken, scroll-progress ise kaydırma miktarına göre genişliği değişecek olan aktif çubuktur.

Adım 2: CSS ile Görsel Tasarım ve Sabitleme

Göstergeyi sayfanın en üstüne sabitlemek için fixed konumlandırma yöntemini kullanacağız. Bu yöntem, kullanıcı sayfayı kaydırsa bile çubuğun ekranda sabit kalmasını sağlar.

.scroll-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #f1f1f1;
  z-index: 9999;
}

.scroll-progress {
  height: 100%;
  background-color: #3498db;
  width: 0%; /* Başlangıç genişliği */
  transition: width 0.1s ease-out; /* Akıcı geçiş için */
}

transition özelliği, genişlik değişimlerinin ani değil, yumuşak bir şekilde gerçekleşmesini sağlar. z-index değeri, çubuğun diğer tüm içeriklerin üzerinde görünmesini garanti eder.

Adım 3: JavaScript ile Dinamik Hesaplama

Kaydırma göstergesinin çalışması için kullanıcının ne kadar kaydırdığını hesaplamamız gerekir. 2026 standartlarında, performans kaybını önlemek için window.onscroll olayını verimli kullanmalıyız.

window.onscroll = function() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("progressBar").style.width = scrolled + "%";
};

Bu kod bloğu, toplam sayfa yüksekliğinden ekran yüksekliğini çıkararak "kaydırılabilir" alanı hesaplar. Ardından, mevcut kaydırma konumunu bu alana oranlayarak yüzde değerini bulur ve CSS genişliğini günceller.

Adım 4: Özelleştirilebilir Tasarım Seçenekleri

Göstergenizi markanızın renklerine veya sayfa tasarımınıza göre kolayca değiştirebilirsiniz. Aşağıdaki tablo, özelleştirme parametrelerini ve etkilerini özetler.

Adım 5: Performans ve Güvenlik Uyarıları

Web projelerinde animasyon ve scroll olayları performans darboğazlarına neden olabilir. requestAnimationFrame kullanarak kaydırma işlemlerini tarayıcının yeniden boyama döngüsüyle senkronize etmek en iyi pratiktir.

Dikkat: Kullanıcı verilerini veya hassas bilgileri işleyen sayfalarda, DOM manipülasyonlarının XSS (Cross-Site Scripting) açıklarına yol açmamasına dikkat edilmelidir. Bu uygulamada doğrudan kullanıcı girdisi almadığımız için risk düşüktür, ancak harici içerik çekiyorsanız verileri temizlediğinizden emin olun.

let ticking = false;

window.addEventListener('scroll', function() {
  if (!ticking) {
    window.requestAnimationFrame(function() {
      // Hesaplama işlemleri burada yapılır
      ticking = false;
    });
    ticking = true;
  }
});

Bu yöntem, tarayıcının her milisaniyede hesaplama yapmasını engelleyerek CPU kullanımını ciddi oranda düşürür.

Sıkça Sorulan Sorular

Scroll çubuğu mobil cihazlarda nasıl görünür?

Mobil cihazlarda ekran genişliği az olduğu için height değerini 4px civarında tutmak daha estetik sonuçlar verir. Ayrıca position: fixed mobil tarayıcılarda sorunsuz çalışır.

Gösterge neden sayfanın en altında bitmiyor?

Bu genellikle scrollHeight hesaplamasındaki küçük farklardan kaynaklanır. document.documentElement.clientHeight değerini doğru kullandığınızdan emin olun.

Daha karmaşık animasyonlar ekleyebilir miyim?

Evet, CSS linear-gradient kullanarak çubuğa renk geçişleri ekleyebilir veya box-shadow ile parlama efekti verebilirsiniz.

İçerik dinamik olarak yüklenirse ne yapmalıyım?

Eğer sayfanızda AJAX ile içerik yükleniyorsa, sayfa yüksekliği değişeceği için height değişkenini her içerik yüklemesinden sonra yeniden hesaplamanız gerekir.

Bu yöntem SEO'yu etkiler mi?

Hayır, bu sadece bir görsel arayüz bileşenidir ve arama motoru botlarının içeriği taramasını engellemez veya olumsuz etkilemez.

İleri Düzey İpuçları: Scroll Göstergesini Dinamik İçeriklerle Senkronize Etme

Modern web uygulamalarında içerik genellikle AJAX veya Fetch API aracılığıyla dinamik olarak yüklenir. Sayfa içeriği arttığında, mevcut scroll hesaplamanız geçersiz kalabilir. Bu durumu yönetmek için MutationObserver API'sini kullanarak DOM değişikliklerini izlemek en sağlıklı yaklaşımdır.

Aşağıdaki kod bloğu, sayfa yüksekliği değiştiğinde scroll göstergesini otomatik olarak güncelleyen bir gözlemci yapısını göstermektedir:

const progressBar = document.querySelector('.scroll-progress');
const observer = new MutationObserver(() => {
    // İçerik değiştiğinde hesaplamayı tetikle
    updateScrollProgress();
});

observer.observe(document.body, {
    childList: true,
    subtree: true,
    characterData: true
});

function updateScrollProgress() {
    const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
    const progress = (window.scrollY / totalHeight) * 100;
    progressBar.style.width = progress + '%';
}

Hata Ayıklama ve Tarayıcı Uyumluluk Testleri

Scroll göstergesi geliştirirken karşılaşılan en yaygın sorun, tarayıcıların scrollHeight ve scrollTop değerlerini farklı yorumlamasıdır. Özellikle DOCTYPE tanımlanmamış eski projelerde bu değerler document.body üzerinden okunurken, modern projelerde document.documentElement üzerinden okunmalıdır.

Yaygın Hata Senaryoları

• Taşma (Overflow) Sorunları: Eğer body veya html etiketlerine overflow: hidden verilmişse, scroll hesaplamaları sıfır dönecektir. Göstergenin çalışması için ana kapsayıcının kaydırılabilir olması şarttır.
• Dikey Kaydırma Çubuğu Genişliği: Bazı işletim sistemlerinde kaydırma çubuğu içeriğin üzerine biner, bazılarında ise genişliği içeriği daraltır. Göstergenin position: fixed ile en üstte sabitlenmesi, bu çakışmaları önlemek için en iyi yöntemdir.
• Z-Index Çakışmaları: Göstergenin diğer sabit menülerin (navbar) altında kalmaması için z-index: 9999 gibi yüksek bir değer atandığından emin olun.

Test Kontrol Listesi

Bu testleri tamamladıktan sonra, CSS will-change: width; özelliğini kullanarak tarayıcının donanım hızlandırmasını (GPU acceleration) tetikleyebilir ve animasyonun çok daha akıcı bir şekilde çalışmasını sağlayabilirsiniz.

Sonuç

Html & Css ile özelleştirilebilir bir dinamik sayfa kaydırma göstergesi yapmak, kullanıcı deneyimini profesyonel bir seviyeye taşımanın en pratik yollarından biridir. Bu rehberde öğrendiğiniz teknikleri kullanarak, kendi sitenizde ziyaretçilerinize içerik tüketim süreçlerinde rehberlik edebilirsiniz. Bir sonraki adım olarak, bu göstergeye "okuma süresi" ekleyen veya belirli bölümlere gelindiğinde renk değiştiren daha gelişmiş özellikler eklemeyi deneyebilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kodlar eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce tarayıcı uyumluluk testlerini yapmalı ve güvenlik standartlarına uygunluğunu doğrulamalısınız.