Ana içeriğe geç Dokümanlar navigasyonuna atla
in English

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.

Nasıl çalışır

Scrollspy'ın düzgün çalışması için birkaç gereksinimi vardır:

  • Bir Bootstrap gezinme bileşeninde veya liste grubunda kullanılmalıdır .
  • Scrollspy, position: relative;gözetlediğiniz öğeye ihtiyaç duyar, genellikle <body>.
  • Çapalar ( <a>) gereklidir ve bununla birlikte bir öğeye işaret etmelidir id.

Başarılı bir şekilde uygulandığında, gezinme veya liste grubunuz buna göre güncellenecek ve .activesınıfı ilişkili hedeflerine göre bir öğeden diğerine taşıyacaktır.

Kaydırılabilir kaplar ve klavye erişimi

Kaydırılabilir bir kap ( dışında ) yapıyorsanız, klavye erişimini sağlamak için a ile birlikte bir kümeye sahip olduğunuzdan ve ona uyguladığınızdan <body>emin olun .heightoverflow-y: scroll;tabindex="0"

Gezinme çubuğundaki örnek

Gezinme çubuğunun altındaki alanı kaydırın ve aktif sınıf değişimini izleyin. Açılan öğeler de vurgulanacaktır.

İ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

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.

Üçüncü 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.

dördüncü 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.

Beşinci 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.

<nav id="navbar-example2" class="navbar navbar-light bg-light px-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-offset="0" class="scrollspy-example" 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çe gezinme ile örnek

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

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.

Madde 1-1

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.

Öğe 1-2

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.

2. öğe

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.

madde 3

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.

Madde 3-1

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.

Madde 3-2

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.

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <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 data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Liste grubu ile örnek

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

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.

2. öğe

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.

madde 3

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.

4. madde

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.

<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 data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" 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>

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 data-bs-targetüst öğesinin kimliği veya sınıfıyla özniteliği ekleyin..nav

body {
  position: relative;
}
<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

position: relative;CSS'nizi ekledikten sonra , JavaScript aracılığıyla scrollspy'ı arayın:

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

Çözümlenebilir kimlik hedefleri gerekli

Gezinme çubuğu bağlantılarının çözümlenebilir kimlik hedefleri olmalıdır. Örneğin, a <a href="#home">home</a>, DOM'daki gibi bir şeye karşılık gelmelidir <div id="home"></div>.

Görünmeyen hedef öğeler yoksayıldı

Görünmeyen hedef öğeler yok sayılacak ve bunlara karşılık gelen gezinme öğeleri hiçbir zaman vurgulanmayacaktır.

yöntemler

yenilemek

DOM'a öğe ekleme veya çıkarma ile birlikte scrollspy kullanırken, yenileme yöntemini şu şekilde çağırmanız gerekir:

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

elden çıkarmak

Bir öğenin kaydırma casusunu yok eder. (DOM öğesinde depolanan verileri kaldırır)

getInstance

Bir DOM öğesiyle ilişkili scrollspy örneğini elde etmenizi sağlayan statik yöntem

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

Bir DOM öğesiyle ilişkili scrollspy örneğini almanıza veya başlatılmamış olması durumunda yeni bir tane oluşturmanıza izin veren statik yöntem

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-bs-gibi ekleyin data-bs-offset="".

İsim Tip Varsayılan Tanım
offset sayı 10 Kaydırma konumu hesaplanırken üstten kaydırılacak pikseller.
method sicim auto Gözetlenen öğenin hangi bölümde olduğunu bulur. autokaydırma koordinatlarını almak için en iyi yöntemi seçer. kaydırma koordinatlarını almak offsetiçin yöntemi kullanacaktır . kaydırma koordinatlarını almak için ve özelliklerini kullanır.Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft
target dize | jQuery nesnesi | DOM öğesi Scrollspy eklentisinin uygulanacağı öğeyi belirtir.

Olaylar

Etkinlik tipi Tanım
activate.bs.scrollspy Bu olay, scrollspy tarafından yeni bir öğe etkinleştirildiğinde kaydırma öğesinde tetiklenir.
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})