Scrollspy
Ṣe imudojuiwọn lilọ kiri Bootstrap ni adaṣe tabi ṣe atokọ awọn paati ẹgbẹ ti o da lori ipo yi lọ lati tọka iru ọna asopọ ti n ṣiṣẹ lọwọlọwọ ni wiwo wiwo.
Bawo ni o ṣe n ṣiṣẹ
Scrollspy ni awọn ibeere diẹ lati ṣiṣẹ daradara:
- O gbọdọ lo lori paati Bootstrap nav tabi ẹgbẹ atokọ .
- Scrollspy nbeere
position: relative;
lori eroja ti o ṣe amí lori, nigbagbogbo<body>
. - Awọn ìdákọró (
<a>
) ni a nilo ati pe o gbọdọ tọka si nkan kan pẹlu iyẹnid
.
Nigbati imuse aṣeyọri, nav rẹ tabi ẹgbẹ atokọ yoo ṣe imudojuiwọn ni ibamu, gbigbe .active
kilasi lati ohun kan si ekeji ti o da lori awọn ibi-afẹde ti o somọ wọn.
Awọn apoti ti o le yi lọ ati iwọle si keyboard
Ti o ba n ṣe eiyan ti o le yi lọ (miiran ju awọn <body>
), rii daju pe o ni eto height
kan ati ki overflow-y: scroll;
o lo si rẹ — lẹgbẹẹ kan tabindex="0"
lati rii daju iwọle si keyboard.
Apeere ni navbar
Yi lọ si agbegbe ni isalẹ navbar ki o wo iyipada kilasi ti nṣiṣe lọwọ. Awọn nkan isọ silẹ yoo jẹ afihan bi daradara.
Ibẹrẹ akọkọ
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
Akole keji
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
Akọle kẹta
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
Akọle kẹrin
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
Akọle karun
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
<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>
Apeere pẹlu iteeye nav
Scrollspy tun ṣiṣẹ pẹlu iteeye .nav
s. Ti itẹ-ẹiyẹ .nav
ba jẹ .active
, awọn obi rẹ yoo tun jẹ .active
. Yi lọ si agbegbe lẹgbẹẹ navbar ki o wo iyipada kilasi ti nṣiṣe lọwọ.
Nkan 1
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
Nkan 1-1
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
Nkan 1-2
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
Nkan 2
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
Nkan 3
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
Nkan 3-1
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
Nkan 3-2
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
<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>
Apẹẹrẹ pẹlu ẹgbẹ-akojọ
Scrollspy tun ṣiṣẹ pẹlu awọn .list-group
s. Yi lọ si agbegbe lẹgbẹẹ ẹgbẹ atokọ ki o wo iyipada kilasi ti nṣiṣe lọwọ.
Nkan 1
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
Nkan 2
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
Nkan 3
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
Nkan 4
Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.
<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>
Lilo
Nipasẹ awọn abuda data
Lati fi irọrun ṣafikun ihuwasi scrollspy si lilọ kiri oke rẹ, ṣafikun data-bs-spy="scroll"
si ipin ti o fẹ ṣe amí lori (julọ julọ eyi yoo jẹ <body>
). Lẹhinna ṣafikun data-bs-target
ẹda pẹlu ID tabi kilasi ti ẹya obi ti .nav
paati Bootstrap eyikeyi.
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>
Nipasẹ JavaScript
Lẹhin fifi kun position: relative;
ninu CSS rẹ, pe scrollspy nipasẹ JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Awọn ibi-afẹde ID ti o yanju nilo
Awọn ọna asopọ Navbar gbọdọ ni awọn ibi-afẹde id ti o yanju. Fun apẹẹrẹ, <a href="#home">home</a>
gbọdọ ṣe deede si nkan kan ninu DOM bii <div id="home"></div>
.
Awọn eroja ibi-afẹde ti ko han foju foju pana
Awọn eroja ibi-afẹde ti ko han ni yoo kọbikita ati pe awọn nkan nav ti o baamu wọn kii yoo ṣe afihan.
Awọn ọna
sọdọtun
Nigbati o ba nlo scrollspy ni apapo pẹlu fifi kun tabi yiyọ awọn eroja kuro lati DOM, iwọ yoo nilo lati pe ọna isọdọtun bii bẹ:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
sọnù
Pa ohun ano ká scrollspy. (Yọ data ti o fipamọ sori nkan DOM kuro)
gbaInstance
Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ scrollspy ti o ni nkan ṣe pẹlu nkan DOM kan
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
gbaOrCreateInstance
Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ scrollspy ti o ni nkan ṣe pẹlu nkan DOM kan, tabi ṣẹda ọkan tuntun ti o ko ba ṣe ipilẹṣẹ
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Awọn aṣayan
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-bs-
, bi ninu data-bs-offset=""
.
Oruko | Iru | Aiyipada | Apejuwe |
---|---|---|---|
offset |
nọmba | 10 |
Awọn piksẹli lati aiṣedeede lati oke nigbati o ṣe iṣiro ipo ti yi lọ. |
method |
okun | auto |
Wiwa apakan wo ni eroja amí wa ninu. auto yoo yan ọna ti o dara julọ lati gba awọn ipoidojuko yi lọ. offset yoo lo Element.getBoundingClientRect() ọna lati gba awọn ipoidojuko yi lọ. position yoo lo HTMLElement.offsetTop ati awọn HTMLElement.offsetLeft ohun-ini lati gba awọn ipoidojuko yi lọ. |
target |
okun | ohun jQuery | DOM eroja | Ni pato eroja lati lo ohun itanna Scrollpy. |
Awọn iṣẹlẹ
Iru iṣẹlẹ | Apejuwe |
---|---|
activate.bs.scrollspy |
Iṣẹlẹ yi ina lori awọn yi ano nigbakugba ti a titun ohun kan di mu šišẹ nipasẹ awọn scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})