kaydırma casusu

Görünüm alanında hangi bağlantının etkin olduğunu belirtmek için, Önyükleme navigasyonunu otomatik olarak güncelleyin veya grup bileşenlerini kaydırma konumuna göre listeleyin.

Bu sayfada

Nasıl çalışır

Scrollspy , çapa tarafından başvurulan öğe görünüme kaydırıldığında .active, bağlantı ( <a>) öğelerindeki sınıfı değiştirir. Scrollspy en iyi Bootstrap gezinme bileşeni veya liste grubuyla birlikte kullanılır , ancak geçerli sayfadaki herhangi bir bağlantı öğesiyle de çalışır. İşte nasıl çalıştığı.idhref

Başlamak için scrollspy iki şeye ihtiyaç duyar: bir gezinme, liste grubu veya basit bir bağlantı seti ve ayrıca kaydırılabilir bir kap. Kaydırılabilir kap, <body>bir set heightve ile özel bir öğe veya özel bir öğe olabilir overflow-y: scroll.
Kaydırılabilir kapsayıcıda, ilişkili gezinmenin benzersiz olanı data-bs-spy="scroll"ve data-bs-target="#navId"nerede olduğunu ekleyin. Klavye erişimini sağlamak için bir de eklediğinizden emin olun .navIdidtabindex="0"
"Casus" kapsayıcısını kaydırdıkça .active, ilgili gezinme içindeki bağlantı bağlantılarından bir sınıf eklenir ve kaldırılır. Bağlantıların çözülebilir idhedefleri olmalıdır, aksi takdirde yok sayılırlar. Örneğin, a <a href="#home">home</a>, DOM'daki şuna benzer bir şeye karşılık gelmelidir:<div id="home"></div>
Görünmeyen hedef öğeler göz ardı edilecektir. Aşağıdaki Görünmeyen öğeler bölümüne bakın .

Örnekler

Gezinme çubuğunun altındaki alanı kaydırın ve aktif sınıf değişimini izleyin. Açılır menüyü açın ve açılır öğelerin de vurgulanmasını izleyin.

İlk başlık

Bu, scrollspy sayfası için bazı yer tutucu içeriktir. Sayfayı aşağı kaydırırken uygun gezinme bağlantısının vurgulandığını unutmayın. Bileşen örneği boyunca tekrarlanır. Kaydırma ve vurgulamayı vurgulamak için buraya biraz daha örnek kopya eklemeye devam ediyoruz.

İkinci başlık

Üçüncü başlık

dördüncü başlık

Beşinci başlık

<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

iç içe gezinme

Scrollspy ayrıca iç içe geçmiş .navs ile de çalışır. Bir yuvalanmış .navise .active, ebeveynleri de olacaktır .active. Gezinme çubuğunun yanındaki alanı kaydırın ve aktif sınıf değişimini izleyin.

Madde 1

JavaScript eklentisinin görünür olabilecek tüm öğeler arasından doğru öğeyi seçmeye çalıştığını unutmayın. Aynı anda birden fazla görünür scrollspy hedefi bazı sorunlara neden olabilir.

Madde 1-1

Öğe 1-2

2. öğe

madde 3

Madde 3-1

Madde 3-2

<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#item-1">Item 1</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
          <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
        </nav>
        <a class="nav-link" href="#item-2">Item 2</a>
        <a class="nav-link" href="#item-3">Item 3</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
          <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
        </nav>
      </nav>
    </nav>
  </div>

  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>...</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>...</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>...</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>...</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>...</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>...</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

Liste grubu

Scrollspy ayrıca .list-groups ile de çalışır. Liste grubunun yanındaki alanı kaydırın ve aktif sınıf değişimini izleyin.

Madde 1 2. öğe madde 3 4. madde

Madde 1

2. öğe

madde 3

4. madde

<div class="row">
  <div class="col-4">
    <div id="list-example" class="list-group">
      <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
      <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
      <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="list-item-4">Item 4</h4>
      <p>...</p>
    </div>
  </div>
</div>

Basit çapalar

<a>Scrollspy, gezinme bileşenleri ve liste gruplarıyla sınırlı değildir, bu nedenle mevcut belgedeki herhangi bir bağlantı elemanı üzerinde çalışacaktır . Alanı kaydırın ve .activesınıf değişimini izleyin.

Madde 1 2. öğe madde 3 4. madde madde 5

Madde 1

2. öğe

madde 3

4. madde

madde 5

<div class="row">
  <div class="col-4">
    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="simple-list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="simple-list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="simple-list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="simple-list-item-4">Item 4</h4>
      <p>...</p>
      <h4 id="simple-list-item-5">Item 5</h4>
      <p>...</p>
    </div>
  </div>
</div>

Görünmeyen öğeler

.activeGörünmeyen hedef öğeler yok sayılacak ve bunlara karşılık gelen gezinme öğeleri bir sınıf almayacak . Görünmez bir sarmalayıcıda başlatılan Scrollspy örnekleri, tüm hedef öğeleri yok sayar. refreshSarmalayıcı görünür hale geldiğinde gözlemlenebilir öğeleri kontrol etmek için yöntemi kullanın .

document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
  el.addEventListener('shown.bs.tab', () => {
    const target = el.getAttribute('data-bs-target')
    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
  })
})

kullanım

Veri öznitelikleri aracılığıyla

Üst çubuk navigasyonunuza kolayca scrollspy davranışı eklemek data-bs-spy="scroll"için, gözetlemek istediğiniz öğeye ekleyin (çoğunlukla bu, <body>). Ardından , herhangi bir Bootstrap bileşeninin üst öğesinin veya sınıf adıyla data-bs-targetözniteliği ekleyin.id.nav

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

JavaScript aracılığıyla

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Seçenekler

Seçenekler veri öznitelikleri veya JavaScript aracılığıyla iletilebildiğinden data-bs-, örneğinde olduğu gibi öğesine bir seçenek adı ekleyebilirsiniz data-bs-animation="{value}". Seçenekleri veri öznitelikleri üzerinden geçirirken , seçenek adının “ camelCase ” yerine “ kebab-case ” olarak değiştirildiğinden emin olun. Örneğin, data-bs-custom-class="beautifier"yerine kullanın data-bs-customClass="beautifier".

Bootstrap 5.2.0'dan itibaren, tüm bileşenler , bir JSON dizesi olarak basit bileşen yapılandırmasını barındırabilen deneysel bir ayrılmış veri özniteliğini destekler. data-bs-configBir öğe data-bs-config='{"delay":0, "title":123}'ve data-bs-title="456"özniteliklere sahip olduğunda, nihai titledeğer olacak 456ve ayrı veri öznitelikleri üzerinde verilen değerleri geçersiz kılacaktır data-bs-config. Ek olarak, mevcut veri öznitelikleri, gibi JSON değerlerini barındırabilir data-bs-delay='{"show":0,"hide":150}'.

İsim	Tip	Varsayılan	Tanım
`rootMargin`	sicim	`0px 0px -25%`	Kaydırma konumunu hesaplarken Kesişim Gözlemcisi rootMargin geçerli birimler.
`smoothScroll`	boole	`false`	Bir kullanıcı, ScrollSpy gözlemlenebilirlerine başvuran bir bağlantıya tıkladığında düzgün kaydırma sağlar.
`target`	dize, DOM öğesi	`null`	Scrollspy eklentisinin uygulanacağı öğeyi belirtir.
`threshold`	dizi	`[0.1, 0.5, 1]`	`IntersectionObserver` kaydırma konumu hesaplanırken eşik geçerli giriş.

Kullanımdan Kaldırılan Seçenekler

5.1.3 sürümüne kadar , artık kullanımdan kaldırılan ve ile değiştirilen offset& seçenekleri kullanıyorduk . Geriye dönük uyumluluğu korumak için , verilen bir öğesini ayrıştırmaya devam edeceğiz , ancak bu özellik v6'da kaldırılacaktır .methodrootMarginoffsetrootMargin

yöntemler

Yöntem	Tanım
`dispose`	Bir öğenin kaydırma casusunu yok eder. (DOM öğesinde depolanan verileri kaldırır)
`getInstance`	Bir DOM öğesiyle ilişkilendirilmiş scrollspy örneğini almak için statik yöntem.
`getOrCreateInstance`	DOM öğesiyle ilişkilendirilmiş scrollspy örneğini almak veya başlatılmamış olması durumunda yeni bir tane oluşturmak için statik yöntem.
`refresh`	DOM'a öğe eklerken veya çıkarırken, yenileme yöntemini çağırmanız gerekir.

İşte yenileme yöntemini kullanan bir örnek:

const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
  bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})

Olaylar

Etkinlik	Tanım
`activate.bs.scrollspy`	Bu olay, scrollspy tarafından bir çapa etkinleştirildiğinde kaydırma öğesinde tetiklenir.

const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
  // do something...
})

kaydırma casusu

Nasıl çalışır

Örnekler

gezinme çubuğu

İlk başlık

İkinci başlık

Üçüncü başlık

dördüncü başlık

Beşinci başlık

iç içe gezinme

Madde 1

Madde 1-1

Öğe 1-2

2. öğe

madde 3

Madde 3-1

Madde 3-2

Liste grubu

Madde 1

2. öğe

madde 3

4. madde

Basit çapalar

Madde 1

2. öğe

madde 3

4. madde

madde 5

Görünmeyen öğeler

kullanım

Veri öznitelikleri aracılığıyla

JavaScript aracılığıyla

Seçenekler

yöntemler

Olaylar