Scrollspy
Ավտոմատ թարմացրեք Bootstrap նավիգացիան կամ ցուցակագրեք խմբի բաղադրիչները՝ ոլորման դիրքի հիման վրա՝ ցույց տալու համար, թե որ հղումն է ներկայումս ակտիվ տեսադաշտում:
Ինչպես է դա աշխատում
Scrollspy-ն ունի մի քանի պահանջներ՝ ճիշտ գործելու համար.
- Այն պետք է օգտագործվի Bootstrap nav բաղադրիչի կամ ցուցակի խմբի վրա :
- Scrollspy-ը պահանջում
position: relative;
է այն տարրը, որը դուք լրտեսում եք, սովորաբար<body>
. - Խարիսխները (
<a>
) պահանջվում են և պետք է մատնանշեն դրա հետ կապված տարրըid
:
Երբ հաջողությամբ իրականացվի, ձեր նավի կամ ցուցակի խումբը համապատասխանաբար կթարմացվի՝ .active
դասը տեղափոխելով մի կետից մյուսը՝ ելնելով դրանց առնչվող թիրախներից:
Ոլորվող տարաներ և ստեղնաշարի հասանելիություն
Եթե դուք ոլորվող կոնտեյներ եք պատրաստում (բացի <body>
), համոզվեք, որ ունեք մի height
հավաքածու և overflow-y: scroll;
կիրառեք դրա վրա՝ a-ի կողքին՝ tabindex="0"
ստեղնաշարի հասանելիությունն ապահովելու համար:
Օրինակ navbar-ում
Ոլորեք նավագոտի տակ գտնվող տարածքը և դիտեք ակտիվ դասի փոփոխությունը: Բացվող տարրերը նույնպես ընդգծված կլինեն:
Առաջին վերնագիր
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
Երկրորդ վերնագիր
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
Երրորդ վերնագիր
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
Չորրորդ վերնագիր
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
Հինգերորդ վերնագիր
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
<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>
Օրինակ nested nav
Scrollspy-ն աշխատում է նաև nested .nav
s. Եթե բնադրված .nav
է .active
, նրա ծնողները նույնպես կլինեն .active
: Ոլորեք navbar-ի կողքին գտնվող տարածքը և դիտեք ակտիվ դասի փոփոխությունը:
Կետ 1
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
1-1 կետ
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
1-2 կետ
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
Կետ 2
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
3-րդ կետ
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
3-1 կետ
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
Կետ 3-2
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
<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>
Օրինակ՝ ցուցակ-խմբով
Scrollspy-ն աշխատում է նաև .list-group
ս. Ոլորեք ցուցակի խմբի կողքին գտնվող տարածքը և դիտեք ակտիվ դասի փոփոխությունը:
Կետ 1
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
Կետ 2
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
3-րդ կետ
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
Կետ 4
Սա scrollspy էջի որոշ տեղապահի բովանդակություն է: Նկատի ունեցեք, որ էջը ներքև ոլորելիս ընդգծվում է համապատասխան նավիգացիոն հղումը: Այն կրկնվում է ամբողջ բաղադրիչի օրինակում: Մենք շարունակում ենք ավելացնել ևս մի օրինակ օրինակ այստեղ՝ ընդգծելու ոլորումը և ընդգծումը:
<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>
Օգտագործումը
Տվյալների ատրիբուտների միջոցով
Ձեր վերին տողում նավիգացիայի մեջ հեշտությամբ ավելացնելու սկոլսպի վարքագիծը, ավելացրեք data-bs-spy="scroll"
այն տարրին, որը ցանկանում եք լրտեսել (առավել սովորաբար սա կլինի <body>
): Այնուհետև ավելացրեք հատկանիշը Bootstrap-ի որևէ բաղադրիչի data-bs-target
ծնող տարրի ID-ով կամ դասով :.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-ի միջոցով
Ձեր CSS-ն ավելացնելուց հետո position: relative;
զանգահարեք scrollspy-ը JavaScript-ի միջոցով.
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Պահանջվում են լուծելի ID թիրախներ
Navbar-ի հղումները պետք է ունենան լուծելի ID թիրախներ: Օրինակ, a-ն <a href="#home">home</a>
պետք է համապատասխանի DOM-ում ինչ-որ բանի, ինչպիսին է <div id="home"></div>
.
Անտեսանելի թիրախային տարրերն անտեսվել են
Թիրախային տարրերը, որոնք տեսանելի չեն, անտեսվելու են, և դրանց համապատասխան նավի տարրերը երբեք չեն ընդգծվի:
Մեթոդներ
թարմացնել
Երբ օգտագործում եք scrollspy-ը DOM-ից տարրեր ավելացնելու կամ հեռացնելու հետ մեկտեղ, դուք պետք է զանգահարեք թարմացման մեթոդը այսպես.
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
տնօրինել
Ոչնչացնում է տարրի պտտվող մատիտը: (Հեռացնում է DOM տարրի վրա պահված տվյալները)
getInstance
Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ scrollspy օրինակ՝ կապված DOM տարրի հետ
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ scrollspy օրինակը, որը կապված է DOM տարրի հետ, կամ ստեղծել նորը, եթե այն նախնականացված չէ:
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Ընտրանքներ
Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-bs-
, ինչպես data-bs-offset=""
.
Անուն | Տիպ | Կանխադրված | Նկարագրություն |
---|---|---|---|
offset |
թիվ | 10 |
Փիքսելներ, որոնք պետք է շրջվեն վերևից՝ ոլորման դիրքը հաշվարկելիս: |
method |
լար | auto |
Գտնում է, թե որ հատվածում է գտնվում լրտեսված տարրը: Կընտրի auto ոլորման կոորդինատները ստանալու լավագույն մեթոդը: offset կօգտագործի Element.getBoundingClientRect() ոլորման կոորդինատները ստանալու մեթոդը: position կօգտագործի HTMLElement.offsetTop և HTMLElement.offsetLeft հատկությունները ոլորման կոորդինատները ստանալու համար: |
target |
լարային | jQuery օբյեկտ | DOM տարր | Նշում է Scrollspy հավելվածը կիրառելու տարրը: |
Իրադարձություններ
Միջոցառման տեսակը | Նկարագրություն |
---|---|
activate.bs.scrollspy |
Այս իրադարձությունը բացվում է ոլորման տարրի վրա, երբ նոր տարր ակտիվանում է scrollspy-ի կողմից: |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})