Բաց թողնել հիմնական բովանդակություն Բաց թողնել փաստաթղթերի նավարկություն
in English

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 .navs. Եթե ​​բնադրված .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...
})