Pitani kuzinthu zazikulu Pitani kumayendedwe adocs
in English

Scrollspy

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

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.

Chitsanzo mu navbar

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

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 wachitatu

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 wachinayi

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 wachisanu

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.

<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

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.

Chithunzi 1-1

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.

Chithunzi 1-2

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.

Chinthu 2

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.

Chinthu 3

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.

Chithunzi 3-1

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.

Chithunzi 3-2

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.

<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

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.

Chinthu 2

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.

Chinthu 3

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.

Chinthu 4

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.

<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. autoidzasankha njira yabwino yopezera ma coordinates a mipukutu. offsetadzagwiritsa ntchito Element.getBoundingClientRect()njira yopezera mipukutu yolumikizana. positionadzagwiritsa ntchito HTMLElement.offsetTopndi HTMLElement.offsetLeftkatundu 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...
})