Scrollspy

Sinthani zokha mayendedwe a Bootstrap kapena mndandanda wamagulu amagulu kutengera malo osindikizira kuti muwonetse ulalo womwe ukugwira ntchito powonera.

Patsamba ili

Momwe zimagwirira ntchito

Scrollspy ili ndi zofunikira zingapo kuti igwire bwino ntchito:

Iyenera kugwiritsidwa ntchito pagawo la Bootstrap nav kapena gulu la mndandanda .
Scrollspy imafuna position: relative;pa chinthu chomwe mukuchizonda, nthawi zambiri <body>.
Nangula ( <a>) amafunikira ndipo ayenera kuloza ku chinthu chomwe chili ndi chimenecho id.

Mukagwiritsidwa ntchito bwino, gulu lanu la nav kapena mndandanda lidzasintha moyenera, ndikusuntha .activekalasi kuchokera ku chinthu chimodzi kupita ku china kutengera zomwe akufuna.

Zotengera zosunthika komanso mwayi wa kiyibodi

Ngati mukupanga chidebe chosunthika (kupatulapo <body>), onetsetsani kuti heightmwakhazikitsa overflow-y: scroll;ndikuyikapo-pamodzi ndi a tabindex="0"kuti muwonetsetse kulowa kwa kiyibodi.

Sungani malo omwe ali pansi pa navbar ndikuwona kusintha kwa kalasi yogwira. Zinthu zotsikira zidzawonetsedwanso.

Mutu woyamba

Izi ndi zina zomwe zili patsamba la scrollspy. Zindikirani kuti pamene mukutsitsa tsambalo, ulalo woyenera wakusaka umawonetsedwa. Imabwerezedwa mu gawo lonse lachitsanzo. Tikupitiriza kuwonjezera chitsanzo china apa kuti titsindike kupukuta ndi kuwunikira.

Mutu wachiwiri

Mutu wachitatu

Mutu wachinayi

Mutu wachisanu

<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>

Chitsanzo ndi nested nav

Scrollspy imagwiranso ntchito ndi nested .navs. Ngati chisa .navchili .active, makolo akenso adzakhala .active. Mpukutu pafupi ndi navbar ndikuwona kusintha kwa kalasi yogwira.

Chinthu 1

Chithunzi 1-1

Chithunzi 1-2

Chinthu 2

Chinthu 3

Chithunzi 3-1

Chithunzi 3-2

<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>

Chitsanzo ndi mndandanda-gulu

Scrollspy imagwiranso ntchito ndi .list-groups. Mpukutu m'dera pafupi ndi mndandanda gulu ndi kuona yogwira kusintha kalasi.

Chinthu 1 Chinthu 2 Chinthu 3 Chinthu 4

Chinthu 1

Chinthu 2

Chinthu 3

Chinthu 4

<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>

Kugwiritsa ntchito

Kudzera muzochita za data

Kuti muwonjezere machitidwe a scrollspy pamayendedwe anu apamwamba, onjezani data-bs-spy="scroll"ku chinthu chomwe mukufuna kuti mukazonde (nthawi zambiri izi zitha kukhala <body>). Kenako onjezani mawonekedwewo data-bs-targetndi ID kapena kalasi ya kholo la gawo lililonse la Bootstrap .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>

Kudzera pa JavaScript

Mukawonjezera position: relative;CSS yanu, imbani scrollspy kudzera pa JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Zolinga za ID zothetsedwa ndizofunikira

Maulalo a Navbar akuyenera kukhala ndi ma id omwe angathetsedwe. Mwachitsanzo, <a href="#home">home</a>ziyenera kugwirizana ndi china chake mu DOM monga <div id="home"></div>.

Zosawoneka zofuna kutsata sizinanyalanyazidwe

Zolinga zomwe sizikuwoneka sizidzanyalanyazidwa ndipo zomwe zikugwirizana nazo sizidzawonetsedwa.

Njira

tsitsimutsani

Mukamagwiritsa ntchito scrollspy molumikizana ndi kuwonjezera kapena kuchotsa zinthu mu DOM, muyenera kuyimbira njira yotsitsimutsa motere:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

kutaya

Imawononga scrollspy ya chinthu. (Imachotsa deta yosungidwa pa chinthu cha DOM)

getInstance

Njira yosasunthika yomwe imakupatsani mwayi woti mutenge scrollspy chitsanzo cholumikizidwa ndi chinthu cha DOM

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

GetOrCreateInstance

Njira yosasunthika yomwe imakulolani kuti mutenge chitsanzo cha scrollspy cholumikizidwa ndi chinthu cha DOM, kapena pangani china chatsopano ngati sichinayambike.

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-bs-, monga mu data-bs-offset="".

Dzina	Mtundu	Zosasintha	Kufotokozera
`offset`	nambala	`10`	Ma pixel oti muyike kuchokera pamwamba powerengera malo osindikizira.
`method`	chingwe	`auto`	Ipeza gawo lomwe spied ilimo. `auto`idzasankha njira yabwino yopezera ma coordinates a mipukutu. `offset`adzagwiritsa ntchito `Element.getBoundingClientRect()`njira yopezera mipukutu yolumikizana. `position`adzagwiritsa ntchito `HTMLElement.offsetTop`ndi `HTMLElement.offsetLeft`katundu kuti apeze zolumikizira za mipukutu.
`target`	chingwe \| jQuery chinthu \| Chithunzi cha DOM		Imatchula chinthu choti mugwiritse ntchito pulogalamu yowonjezera ya Scrollspy.

Zochitika

Mtundu wa chochitika	Kufotokozera
`activate.bs.scrollspy`	Chochitikachi chimayaka pamipukutu nthawi iliyonse chinthu chatsopano chikatsegulidwa ndi scrollspy.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy

Momwe zimagwirira ntchito

Zotengera zosunthika komanso mwayi wa kiyibodi

Chitsanzo mu navbar

Mutu woyamba

Mutu wachiwiri

Mutu wachitatu

Mutu wachinayi

Mutu wachisanu

Chitsanzo ndi nested nav

Chinthu 1

Chithunzi 1-1

Chithunzi 1-2

Chinthu 2

Chinthu 3

Chithunzi 3-1

Chithunzi 3-2

Chitsanzo ndi mndandanda-gulu

Chinthu 1

Chinthu 2

Chinthu 3

Chinthu 4

Kugwiritsa ntchito

Kudzera muzochita za data

Kudzera pa JavaScript

Zolinga za ID zothetsedwa ndizofunikira

Zosawoneka zofuna kutsata sizinanyalanyazidwe

Njira

tsitsimutsani

kutaya

getInstance

GetOrCreateInstance

Zosankha

Zochitika