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'ı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ğ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

Üçüncü başlık

dördüncü başlık

Beşinci başlık

<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

Madde 1-1

Öğe 1-2

2. öğe

madde 3

Madde 3-1

Madde 3-2

<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 2. öğe madde 3 4. madde

Madde 1

2. öğe

madde 3

4. madde

<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. `auto`kaydırma koordinatlarını almak için en iyi yöntemi seçer. kaydırma koordinatlarını almak `offset`iç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...
})

kaydırma casusu

Nasıl çalışır

Kaydırılabilir kaplar ve klavye erişimi

Gezinme çubuğundaki örnek

İlk başlık

İkinci başlık

Üçüncü başlık

dördüncü başlık

Beşinci başlık

İç içe gezinme ile örnek

Madde 1

Madde 1-1

Öğe 1-2

2. öğe

madde 3

Madde 3-1

Madde 3-2

Liste grubu ile örnek

Madde 1

2. öğe

madde 3

4. madde

kullanım

Veri öznitelikleri aracılığıyla

JavaScript aracılığıyla

Çözümlenebilir kimlik hedefleri gerekli

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

yöntemler

yenilemek

elden çıkarmak

getInstance

getOrCreateInstance

Seçenekler

Olaylar