Scrollspy

Ntlafatsa ka boiketsetso ho tsamaea ha Bootstrap kapa lethathamo la likarolo tsa sehlopha ho ipapisitse le boemo ba moqolo ho bontša hore na ke sehokelo sefe se sebetsang hona joale boema-kepe.

Leqepheng lena

Kamoo e sebetsang kateng

Scrollspy e na le litlhoko tse 'maloa hore e sebetse hantle:

E tlameha ho sebelisoa ho karolo ea Bootstrap nav kapa sehlopha sa lenane .
Scrollspy e hloka position: relative;ntho eo u ntseng u e hloela, hangata <body>.
Liankora ( <a>) lia hlokahala 'me li tlameha ho supa ntho e nang le eona id.

Ha e kengoa tšebetsong ka katleho, sehlopha sa hau sa nav kapa lethathamo se tla nchafatsa ka nepo, se tsamaisa .activesehlopha ho tloha nthong e 'ngoe ho ea ho se seng ho latela lipehelo tse amanang le tsona.

Lits'oants'o tse tsamaisoang le phihlello ea keyboard

Haeba u etsa setshelo se scrollable (ntle le sa <body>), etsa bonnete ba hore u na le heightsete mme overflow-y: scroll;u se kentse ho sona-haufi le a tabindex="0"ho netefatsa phihlello ea keyboard.

Tsamaisetsa sebaka se ka tlase ho navbar 'me u shebelle phetoho ea sehlopha se sebetsang. Lintho tse theoleloang li tla totobatsoa hape.

Sehlooho sa pele

Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.

Sehlooho sa bobeli

Sehlooho sa boraro

Sehlooho sa bone

Sehlooho sa bohlano

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

Scrollspy e boetse e sebetsa le sehlaha sa .navs. Haeba sehlaha .navse le teng .active, batsoali ba sona le bona ba tla .active. Tsamaisetsa sebaka se haufi le navbar 'me u shebelle phetoho ea sehlopha se sebetsang.

Ntlha ea 1

Ntlha ea 1-1

Ntlha ea 1-2

Ntlha ea 2

Ntlha ea 3

Ntlha ea 3-1

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

Mohlala le sehlopha-sehlopha

Scrollspy e boetse e sebetsa le .list-groups. Tsamaisetsa sebaka se haufi le sehlopha sa lenane mme o shebelle ho fetoha ha sehlopha se sebetsang.

Ntlha ea 1 Ntlha ea 2 Ntlha ea 3 Ntlha ea 4

Ntlha ea 1

Ntlha ea 2

Ntlha ea 3

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

Tšebeliso

Ka litšobotsi tsa data

Ho eketsa habonolo boits'oaro ba scrollspy ho navigation ea topbar ea hau, eketsa nthong data-bs-spy="scroll"eo u batlang ho e hloela (haholo-holo ena e tla ba eona <body>). Ebe u eketsa data-bs-targettšobotsi ka ID kapa sehlopha sa karolo ea motsoali ea karolo efe kapa efe ea 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

Kamora ho kenya position: relative;CSS ea hau, letsetsa scrollspy ka JavaScript:

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

Lipehelo tsa ID tse rarollehang lia hlokahala

Lihokelo tsa Navbar li tlameha ho ba le lipehelo tsa id tse rarollehang. Ka mohlala, e <a href="#home">home</a>tlameha ho lumellana le ntho e 'ngoe e DOM e kang <div id="home"></div>.

Likarolo tse sa bonahaleng tsa sepheo li hlokomolohuoe

Lintlha tse reriloeng tse sa bonahaleng li tla hlokomolohuoa 'me lintho tse tsamaisanang le tsona li ke ke tsa hlakisoa.

Mekhoa

khatholla

Ha o sebelisa scrollspy mmoho le ho eketsa kapa ho tlosa likarolo ho tsoa ho DOM, o tla hloka ho letsetsa mokhoa oa ho khatholla joalo ka:

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

lahla

E senya scrollpy ea element. (E tlosa lintlha tse bolokiloeng karolong ea DOM)

getInstance

Mokhoa o tsitsitseng o u lumellang hore u fumane mohlala oa scrollspy o amanang le ntho ea DOM

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

getOrCreateInstance

Mokhoa o tsitsitseng o u lumellang hore u fumane mohlala oa scrollspy o amanang le ntho ea DOM, kapa u thehe e ncha haeba e sa qalisoa.

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-bs-, joalo ka data-bs-offset="".

Lebitso	Mofuta	Ea kamehla	Tlhaloso
`offset`	palo	`10`	Lipikseli tsa ho theola ho tloha holimo ha ho baloa boemo ba ho tsamaisa.
`method`	khoele	`auto`	E fumana hore na karolo ea spied e ho karolo efe. `auto`e tla khetha mokhoa o motle oa ho fumana likhokahano tsa meqolo. `offset`e tla sebelisa `Element.getBoundingClientRect()`mokhoa oa ho fumana likhokahano tsa moqolo. `position`e tla sebelisa `HTMLElement.offsetTop`le `HTMLElement.offsetLeft`thepa ho fumana likhokahano tsa moqolo.
`target`	khoele \| ntho ea jQuery \| Karolo ea DOM		E hlakisa ntho eo u ka e sebelisang ho sebelisa plugin ea Scrollspy.

Liketsahalo

Mofuta oa ketsahalo	Tlhaloso
`activate.bs.scrollspy`	Ketsahalo ena e sebetsa ho karolo ea moqolo neng kapa neng ha ntho e ncha e kengoa tšebetsong ke scrollspy.

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

Scrollspy

Kamoo e sebetsang kateng

Lits'oants'o tse tsamaisoang le phihlello ea keyboard

Mohlala ho navbar

Sehlooho sa pele

Sehlooho sa bobeli

Sehlooho sa boraro

Sehlooho sa bone

Sehlooho sa bohlano

Mohlala ka sehlaha nav

Ntlha ea 1

Ntlha ea 1-1

Ntlha ea 1-2

Ntlha ea 2

Ntlha ea 3

Ntlha ea 3-1

Ntlha ea 3-2

Mohlala le sehlopha-sehlopha

Ntlha ea 1

Ntlha ea 2

Ntlha ea 3

Ntlha ea 4

Tšebeliso

Ka litšobotsi tsa data

Ka JavaScript

Lipehelo tsa ID tse rarollehang lia hlokahala

Likarolo tse sa bonahaleng tsa sepheo li hlokomolohuoe

Mekhoa

khatholla

lahla

getInstance

getOrCreateInstance

Dikgetho

Liketsahalo