Tlolela go diteng tše kgolo Tlolela go docs navigation
in English

Scrollspy ya go phuthwa

Mpshafatša ka go iketla go sepelasepela ga Bootstrap goba dikarolo tša sehlopha sa lenaneo go ya ka maemo a go sepelasepela go laetša gore ke kgokagano efe yeo e šomago gabjale ka go lefelo la go lebelela.

Letlakaleng le

Kamoo e šomago ka gona

Scrollspy e na le dinyakwa tše mmalwa gore e šome gabotse:

  • E swanetše go šomišwa go karolo ya nav ya Bootstrap goba sehlopha sa lenaneo .
  • Scrollspy e nyaka position: relative;ka elemente yeo o e hlolago, gantši e <body>.
  • Ditshetledi ( <a>) di a nyakega gomme di swanetše go šupa elemente yeo e nago le seo id.

Ge e phethagaditšwe ka katlego, sehlopha sa gago sa nav goba sa lenaneo se tla mpshafatša ka go swanela, sa šuthiša .activesehlopha go tšwa go selo se tee go ya go se se latelago go ya ka diphetho tša bona tše di amanago.

Ditshelo tšeo di ka kgokološwago le phihlelelo ya khiiboto

Ge e ba o dira setshelo seo se ka kgokološwago (ntle le <body>), kgonthišetša gore o na le heightsete gomme ya overflow-y: scroll;dirišwa go sona—go bapa le a tabindex="0"go kgonthišetša phihlelelo ya khiiboto.

Mohlala ka navbar

Scroll lefelo ka fase ga navbar gomme o lebelele phetogo ya sehlopha se se šomago. Diaetheme tša go theoga le tšona di tla hlaolwa.

Hlogo ya mathomo

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Hlogo ya bobedi

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Hlogo ya boraro

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Hlogo ya bone

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Hlogo ya bohlano

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

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

Mohlala ka nested nav

Scrollspy e šoma gape ka .navs yeo e tsentšwego ka gare ga sehlaga. Ge e ba nested .nave le .active, batswadi ba yona le bona ba tla ba .active. Scroll lefelo kgauswi le navbar gomme o lebelele phetogo ya sehlopha se se šomago.

Ntlha 1.

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Ntlha ya 1-1

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Ntlha ya 1-2

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Ntlha ya 2.

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Ntlha ya 3

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Ntlha ya 3-1

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Ntlha ya 3-2

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

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

Mohlala ka lenaneo-sehlopha

Scrollspy e šoma gape ka .list-groups. Scroll lefelo kgauswi le sehlopha sa lenaneo gomme o lebelele phetogo ya klase ye e šomago.

Ntlha 1.

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Ntlha ya 2.

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Ntlha ya 3

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

Ntlha ya 4.

Ye ke diteng tše dingwe tša seswaro sa lefelo sa letlakala la scrollspy. Hlokomela gore ge o dutše o sepelasepela letlakaleng, kgokagano ya maleba ya go sepelasepela e a hlaolwa. E boeletšwa go ralala le mohlala wa karolo. Re dula re tlaleletša ka khopi ye nngwe gape ya mohlala mo go gatelela go kgokološa le go hlaola.

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

Tšhomišo

Ka dika ya data

Go oketša gabonolo boitshwaro bja scrollspy go go sepelasepela ga gago ga topbar, oketša data-bs-spy="scroll"go elemente yeo o nyakago go e hlola (ka tlwaelo kudu se e be e tla ba <body>). Ke moka o tlaleletše data-bs-targetseka ka ID goba sehlopha sa elemente ya motswadi ya karolo efe goba efe ya 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>

Ka JavaScript

Ka morago ga go tlaleletša position: relative;ka go CSS ya gago, bitša scrollspy ka JavaScript:

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

Diphetho tša ID tšeo di ka rarollwago di a nyakega

Dikgokagano tša Navbar di swanetše go ba le diphetho tša id tšeo di ka rarollwago. Go fa mohlala, a e <a href="#home">home</a>swanetše go sepelelana le selo se sengwe ka go DOM go swana le <div id="home"></div>.

Dielemente tša nepišo tšeo di sa bonagalego di hlokomologwa

Dielemente tša nepišo tšeo di sa bonagalego di tla hlokomologwa gomme dilo tša tšona tša nav tše di sepelelanago di ka se tsoge di hlaotšwe.

Mekgwa ya go šoma

hlabolla

Ge o diriša scrollspy ka kopanelo le go tlaleletša goba go tloša dielemente go tšwa go DOM, o tla swanelwa ke go bitša mokgwa wa go hlabolla go swana le bjalo:

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

lahla

E senya scrollspy ya elemente. (E tloša ya data ye e bolokilwego go elemente ya DOM)

hwetšaMohlala

Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa scrollspy wo o amanago le elemente ya DOM

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

hwetšaGobaHlamaMohlala

Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa scrollspy wo o amanago le elemente ya DOM, goba go hlama ye mpsha ge go ka direga gore e be e sa thongwa

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

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-offset="".

Leina Mohuta Hlokomologa Tlhalošo
offset nomoro 10 Dipiksele go offset go tšwa godimo ge o bala boemo bja go phurolla.
method thapo auto E hwetša gore ke karolo efe yeo elemente ya dihlodi e lego go yona e autotla kgetha mokgwa wo mokaone wa go hwetša dihlomathišo tša go kgokološa. offsettla diriša Element.getBoundingClientRect()mokgwa wa go hwetša dihlomathišo tša go phurolla. positione tla šomiša dithoto tša HTMLElement.offsetTople HTMLElement.offsetLeftgo hwetša dihlomathišo tša go sepelasepela.
target thapo ya | jQuery selo sa | DOM elemente E laetša elemente ya go diriša polaka ya Scrollspy.

Ditiragalo

Mohuta wa tiragalo Tlhalošo
activate.bs.scrollspy Tiragalo ye e thunya godimo ga elemente ya go phuthwa neng le neng ge selo se sefsa se thoma go šomišwa ke scrollspy. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})