Bootstrap 5 Kaydırma İzleyici

Scrollspy

Scrollspy,KaydırmaKonum otomatik olarak güncellenen navigasyon listesindeki bağlantıları günceller.

Scrollspy Nasıl Oluşturulur

Aşağıdaki örnek, Scrollspy nasıl oluşturulacağını gösterir:

Örnek

<!-- Kaydırılabilir Alan -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Navigasyon - <a> elementleri, kaydırılabilir alanlardaki belirli bölümlere atlamak için kullanılır -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">Bölüm 1</a></li>
    ...
</nav>
<!-- Bölüm 1 -->
<div id="section1">
  <h1>Bölüm 1</h1>
  <p> Bu sayfayı kaydırmayı deneyin ve kaydırırken navigasyon panosunu kontrol edin!</p>
</div>
...
</body>

Deneyin

Kişisel deneyim

Açıklama data-bs-spy="scroll" Kaydırılabilir alan olarak kullanılan elemente ekleyin (genellikle <body> elementini ekleyin).

ve ardından data-bs-target Özelliği, değeri id veya navigasyon panosunun sınıfı olan.navbar) Bu, navigasyon panosu ile kaydırılabilir alanın birleştirilmesini sağlamak içindir.

Lütfen dikkat edin, kaydırılabilir elementler, navigasyon listesi öğeleri içindeki bağlantı ID'leri ile eşleşmelidir (<div id="section1"> Eşleşme <a href="#section1">)

İsteğe Bağlı data-bs-offset Özellik, kaydırma konumunu hesaplamak için üstten kayan piksel sayısını belirler. Nav menüsündeki bağlantılar, kaydırılabilir elementlere atlanırken, etkin durumun çok erken değiştiğini hissediyorsanız bu kullanışlı olabilir. Varsayılan değeri 10 pikseldir.

İlgili konumlandırma gerektirirdata-bs-spy="scroll" ile etiketlenen elementler CSS gerektirir Position Özellik değerinin "relative" olarak ayarlanması gerekir ki normal çalışsın.