Scrollspy
“Bootstrap” nawigasiýasyny awtomatiki usulda täzeläň ýa-da häzirki baglanyşykda haýsy baglanyşygyň işjeňdigini görkezmek üçin aýlaw ýagdaýyna esaslanýan topar böleklerini sanaň.
Bu nähili işleýär
Scrollspy-nyň dogry işlemegi üçin birnäçe talaplar bar:
- “Bootstrap nav” komponentinde ýa-da sanaw toparynda ulanylmaly .
- Scrollspy
position: relative;
içalyçylyk edýän elementiňize, adatça<body>
. - Gämi (
<a>
) talap edilýär we şonuň bilen bir elementi görkezmeliid
.
Üstünlikli durmuşa geçirilende, deňiz ýa-da sanaw toparyňyz .active
degişli maksatlara esaslanyp synpy bir elementden beýlekisine geçirer.
Aýlanyp bolýan gaplar we klawiatura girişi
Aýlanyp bolýan konteýner ýasaýan bolsaňyz (klawiaturadan başga ), klawiaturanyň elýeterliligini üpjün etmek üçin bir gapdalynda bir toplumyň <body>
bardygyny we ulanyljakdygyny unutmaň .height
overflow-y: scroll;
tabindex="0"
Deňiz panelinde mysal
Deňiz paneliniň aşagyndaky meýdany aýlaň we işjeň synp üýtgemegine tomaşa ediň. Açylýan zatlar hem görkeziler.
Ilki sözbaşy
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
Ikinji sözbaşy
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
Üçünji sözbaşy
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
Dördünji sözbaşy
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
Bäşinji sözbaşy
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
<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çindäki deňiz bilen mysal
Scrollspy höwürtgelenen .nav
s bilen hem işleýär. Höwürtgelenen .nav
bolsa .active
, ene-atasy hem bolar .active
. Deňiz paneliniň gapdalyndaky meýdany aýlaň we işjeň synp üýtgemegine tomaşa ediň.
1-nji bent
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
1-1-nji bent
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
1-2-nji bent
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
2-nji bent
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
3-nji bent
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
3-1-nji bent
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
3-2-nji bent
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
<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>
Sanaw topary bilen mysal
Scrollspy .list-group
s bilen hem işleýär. Sanaw toparynyň gapdalyndaky meýdany aýlaň we işjeň synp üýtgemegine tomaşa ediň.
1-nji bent
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
2-nji bent
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
3-nji bent
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
4-nji bent
Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.
<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>
Ulanylyşy
Maglumat atributlary arkaly
Topbar nawigasiýaňyza skrollspy häsiýetini aňsatlyk bilen goşmak data-bs-spy="scroll"
üçin içaly bolmak isleýän elementiňize goşuň (köplenç bu şeýle bolar <body>
). Soňra islendik Bootstrap komponentiniň data-bs-target
esasy elementiniň ID ýa-da synpy bilen atribut goşuň..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 arkaly
CSS-ä goşanyňyzdan soň position: relative;
, JavaScript arkaly scrollspy jaň ediň:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Çözüp bolýan ID nyşanlary talap edilýär
Navbar baglanyşyklarynda çözülip bilinýän ID nyşanlary bolmaly. Mysal üçin, <a href="#home">home</a>
DOM-daky ýaly bir zada laýyk bolmaly <div id="home"></div>
.
Görünmeýän maksat elementleri hasaba alynmady
Görünmeýän nyşan elementleri hasaba alynmaz we degişli deňiz elementleri hiç haçan tapawutlandyrylmaz.
Usullar
täzele
DOM-dan elementleri goşmak ýa-da aýyrmak bilen bilelikde scrollspy ulananyňyzda, täzeleniş usulyna şeýle jaň etmeli bolarsyňyz:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
taşlaň
Bir elementiň aýlawyny ýok edýär. (DOM elementindäki saklanan maglumatlary aýyrýar)
GetInstance
DOM elementi bilen baglanyşykly scrollspy mysalyny almaga mümkinçilik berýän statiki usul
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
DOM elementi bilen baglanyşykly scrollspy mysalyny almaga ýa-da başlamadyk ýagdaýynda täzesini döretmäge mümkinçilik berýän statiki usul.
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Görnüş
Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bs-
bolşy ýaly goşuň data-bs-offset=""
.
Ady | Görnüşi | Bellenen | Düşündiriş |
---|---|---|---|
offset |
sany | 10 |
Aýlanyş ýagdaýyny hasaplanyňyzda ýokardan ýapyljak pikseller. |
method |
setir | auto |
Içaly elementiň haýsy bölümdedigini tapýar. auto Aýlamak koordinatlaryny almak üçin iň oňat usuly saýlar. aýlaw koordinatlaryny almak offset üçin usuly ulanar . aýlaw koordinatlaryny almak üçin häsiýetleri we häsiýetleri ulanar .Element.getBoundingClientRect() position HTMLElement.offsetTop HTMLElement.offsetLeft |
target |
setir | jQuery obýekti | DOM elementi | Scrollspy pluginini ulanmak üçin elementi kesgitleýär. |
Wakalar
Çäräniň görnüşi | Düşündiriş |
---|---|
activate.bs.scrollspy |
Bu waka, haçan-da täze bir zat scrollspy tarapyndan işjeňleşdirilse, aýlaw elementine ýanýar. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})