Scrollspy

Na-emelite igodo Bootstrap na-akpaghị aka ma ọ bụ depụta ihe mejupụtara otu dabere na ọnọdụ mpịakọta iji gosi njikọ dị ugbu a na ebe nlele.

Na ibe a

Ka o si arụ ọrụ

Scrollspy nwere ihe ole na ole achọrọ iji rụọ ọrụ nke ọma:

A ga-eji ya na akụrụngwa Bootstrap nav ma ọ bụ otu ndepụta .
Scrollspy chọrọ position: relative;na mmewere ị na-enyocha, na-abụkarị <body>.
Achọrọ arịlịka ( <a>) ma ga-arụtụ aka na mmewere na nke ahụ id.

Mgbe etinyere ya nke ọma, ụgbọ mmiri gị ma ọ bụ otu ndepụta ga-emelite otu a, na-ebugharị .activeklaasị site n'otu ihe gaa na nke ọzọ dabere na ebumnuche ha jikọtara ya.

Akpa nwere ike ịpịgharị na ịnweta ahụigodo

Ọ bụrụ na ị na-eme akpa a na-atụgharịgharị (na-abụghị nke <body>), jide n'aka na ị nwere heightsetịpụ ma overflow-y: scroll;tinye ya na ya-n'akụkụ a tabindex="0"iji hụ na ịnweta ahụigodo.

Pịgharịa mpaghara n'okpuru ebe ịnya ụgbọ mmiri wee lelee klaasị na-agbanwe agbanwe. A ga-eme ka ọ pụta ìhè nke ọma.

Isi mmalite

Nke a bụ ụfọdụ ọdịnaya edebe maka scrollspy ibe. Rịba ama na ka ị na-atụgharị na ibe ahụ, a na-eme ka njikọ igodo kwesịrị ekwesị pụta ìhè. A na-emeghachi ya n'ime ihe atụ akụrụngwa. Anyị na-agbakwunye otu ihe atụ ọzọ ebe a iji mesie mpịakọta ike na ime ka ọ pụta ìhè.

Isi nke abụọ

Isi nke atọ

Isi nke anọ

Isi nke ise

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

Ọmụmaatụ nwere nav akwu

Scrollspy na-arụkwa ọrụ na akwu .navs. .navỌ bụrụ na akwụrụ .active, ndị mụrụ ya ga-abụkwa .active. Pịgharịa n'akụkụ navbar wee lelee klaasị na-agbanwe agbanwe.

Ihe 1

Ihe 1-1

Ihe 1-2

Ihe 2

Ihe 3

Ihe 3-1

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

Ọmụmaatụ nwere ndepụta-otu

Scrollspy na-arụkwa ọrụ na .list-groups. Pịgharịa n'akụkụ n'akụkụ otu ndepụta ma lelee mgbanwe klaasị nọ n'ọrụ.

Ihe 1 Ihe 2 Ihe 3 Ihe 4

Ihe 1

Ihe 2

Ihe 3

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

Ojiji

Site na njirimara data

Ka mfe tinye scrollspy omume na gị topbar navigation, tinye data-bs-spy="scroll"na mmewere ị chọrọ inyocha na (kasị a ga-abụ <body>). Wee tinye data-bs-targetnjirimara na ID ma ọ bụ klas nke ihe nne na nna nke .navakụrụngwa Bootstrap ọ bụla.

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>

Site na Javascript

Ka ịgbakwunye position: relative;na CSS gị, kpọọ scrollspy site na Javascript:

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

Ebumnuche ID nwere ike idozi chọrọ

Njikọ Navbar ga-enwerịrị ebumnuche id nwere ike idozi. Dịka ọmụmaatụ, a <a href="#home">home</a>ga-ederịrị ihe na DOM dịka <div id="home"></div>.

Ihe ndị na-adịghị ahụ anya leghaara anya

A ga-eleghara ihe ndị echere na-adịghị ahụ anya, a gaghị egosipụtakwa ihe ụgbọ mmiri ha kwekọrọ.

Ụzọ

nweta ume

Mgbe ị na-eji scrollspy yana ịgbakwunye ma ọ bụ wepụ ihe ndị dị na DOM, ị ga-akpọ usoro ume ọhụrụ dị ka:

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

tufuo

Na-emebi akwụkwọ mpịakọta mmewere. (Na-ewepụ data echekwara na mmewere DOM)

nweta ihe atụ

Usoro kwụ ọtọ nke na-enye gị ohere ịnweta ihe atụ scrollspy jikọtara ya na mmewere DOM

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

nwetaOrCreateInstance

Usoro kwụ ọtọ nke na-enye gị ohere ịnweta ihe atụ scrollspy jikọtara ya na mmewere DOM, ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-bs-, dị ka ọ dị na data-bs-offset="".

Aha	Ụdị	Ọdabara	Nkọwa
`offset`	nọmba	`10`	Pikselụ ka a ga-esi n'elu pụta mgbe ị na-agbakọ ọnọdụ mpịakọta.
`method`	eriri	`auto`	Chọta ngalaba nke ihe nledo dị na `auto`ga-ahọrọ usoro kachasị mma iji nweta nhazi akwụkwọ mpịakọta. `offset`ga-eji `Element.getBoundingClientRect()`usoro ahụ nweta nhazi akwụkwọ mpịakọta. `position`ga-eji `HTMLElement.offsetTop`na `HTMLElement.offsetLeft`akụrụngwa iji nweta nhazi akwụkwọ mpịakọta.
`target`	eriri \| ihe jQuery \| DOM element		Na-akọwapụta mmewere iji tinye Scrollspy ngwa mgbakwunye.

Ihe omume

Ụdị mmemme	Nkọwa
`activate.bs.scrollspy`	Ihe omume a na-agba ọkụ na akụkụ akwụkwọ mpịakọta mgbe ọ bụla ihe ọhụrụ na-arụ ọrụ site na scrollspy.

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

Scrollspy

Ka o si arụ ọrụ

Akpa nwere ike ịpịgharị na ịnweta ahụigodo

Ọmụmaatụ na navbar

Isi mmalite

Isi nke abụọ

Isi nke atọ

Isi nke anọ

Isi nke ise

Ọmụmaatụ nwere nav akwu

Ihe 1

Ihe 1-1

Ihe 1-2

Ihe 2

Ihe 3

Ihe 3-1

Ihe 3-2

Ọmụmaatụ nwere ndepụta-otu

Ihe 1

Ihe 2

Ihe 3

Ihe 4

Ojiji

Site na njirimara data

Site na Javascript

Ebumnuche ID nwere ike idozi chọrọ

Ihe ndị na-adịghị ahụ anya leghaara anya

Ụzọ

nweta ume

tufuo

nweta ihe atụ

nwetaOrCreateInstance

Nhọrọ

Ihe omume