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 etmelidirid
.
Başarılı bir şekilde uygulandığında, gezinme veya liste grubunuz buna göre güncellenecek ve .active
sı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 .height
overflow-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ş .nav
s ile de çalışır. Bir yuvalanmış .nav
ise .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-group
s 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. 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() position HTMLElement.offsetTop HTMLElement.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...
})