Mafere na isi ọdịnaya Gaa na ntugharị docs
in English

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.

Ọmụmaatụ na navbar

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

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

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

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 ise

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

<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

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

Ihe 1-1

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

Ihe 1-2

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

Ihe 2

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

Ihe 3

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

Ihe 3-1

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

Ihe 3-2

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

<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

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

Ihe 2

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

Ihe 3

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

Ihe 4

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

<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 autoga-ahọrọ usoro kachasị mma iji nweta nhazi akwụkwọ mpịakọta. offsetga-eji Element.getBoundingClientRect()usoro ahụ nweta nhazi akwụkwọ mpịakọta. positionga-eji HTMLElement.offsetTopna HTMLElement.offsetLeftakụ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...
})