Scrollspy

Hloov kho Bootstrap navigation lossis sau npe pawg raws li txoj haujlwm scroll los qhia tias qhov txuas twg tam sim no muaj nyob hauv qhov chaw saib.

Ntawm nplooj ntawv no

Nws ua haujlwm li cas

Scrollspy muaj ob peb yam yuav tsum ua kom zoo:

Nws yuav tsum tau siv rau ntawm Bootstrap nav tivthaiv lossis npe pawg .
Scrollspy xav tau position: relative;ntawm lub caij koj tab tom spying rau, feem ntau yog <body>.
Anchors ( <a>) yuav tsum tau thiab yuav tsum taw tes rau ib lub ntsiab nrog qhov ntawd id.

Thaum ua tiav tiav, koj pawg nav lossis cov npe yuav hloov kho raws li, txav .activechav kawm los ntawm ib yam khoom mus rau tom ntej raws li lawv cov hom phiaj cuam tshuam.

Scrollable ntim thiab cov keyboard nkag

Yog tias koj tab tom ua ib lub thawv scrollable (tshwj tsis yog lub <body>), nco ntsoov tias muaj ib qho heightteeb tsa thiab overflow-y: scroll;siv rau nws-nrog tabindex="0"rau kom paub meej cov keyboard nkag.

Scroll thaj tsam hauv qab ntawm navbar thiab saib qhov hloov pauv hauv chav kawm. Cov khoom poob qis yuav raug pom zoo ib yam.

Thawj nqe lus

Nov yog qee qhov chaw muab cov ntsiab lus rau nplooj ntawv scrollspy. Nco ntsoov tias thaum koj nqes mus rau nplooj ntawv, qhov tsim nyog navigation txuas yog tseem ceeb. Nws rov ua dua thoob plaws hauv qhov piv txwv. Peb pheej ntxiv qee qhov piv txwv ntxiv ntawm no los hais txog qhov scrolling thiab highlighting.

Ob nqe lus

Peb lub taub hau

Plaub nqe lus

Tshooj tsib

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

Piv txwv nrog nested nav

Scrollspy kuj ua haujlwm nrog nested .navs. Yog ib lub zes .nav, .activenws niam nws txiv kuj yuav .active. Scroll qhov chaw nyob ib sab ntawm lub navbar thiab saib qhov hloov pauv hauv chav kawm.

Yam khoom 1

Nqe 1-1

Nqe 1-2

Yam khoom 2

Yam khoom 3

Nqe 3-1

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

Piv txwv nrog cov npe-pab pawg

Scrollspy kuj ua haujlwm nrog .list-groups. Scroll qhov chaw nyob ib sab ntawm cov npe pawg thiab saib cov chav kawm hloov pauv.

Yam khoom 1 Yam khoom 2 Yam khoom 3 Yam khoom 4

Yam khoom 1

Yam khoom 2

Yam khoom 3

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

Kev siv

Los ntawm cov ntaub ntawv attributes

Txhawm rau yooj yim ntxiv scrollspy tus cwj pwm rau koj qhov topbar navigation, ntxiv data-bs-spy="scroll"rau lub caij koj xav soj ntsuam (feem ntau qhov no yuav yog <body>). Tom qab ntawd ntxiv tus data-bs-targetcwj pwm nrog tus ID lossis chav kawm ntawm niam txiv lub ntsiab ntawm ib qho Bootstrap .navtivthaiv.

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>

Ntawm JavaScript

Tom qab ntxiv position: relative;hauv koj CSS, hu rau scrollspy ntawm JavaScript:

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

Resolvable ID hom phiaj xav tau

Navbar txuas yuav tsum muaj lub hom phiaj id daws tau. Piv txwv li, ib qho <a href="#home">home</a>yuav tsum sib haum rau ib yam dab tsi hauv DOM zoo li <div id="home"></div>.

Tsis pom lub hom phiaj yam tsis quav ntsej

Lub hom phiaj cov ntsiab lus uas tsis pom yuav raug ignored thiab lawv cov khoom siv nav yuav tsis raug qhia.

Cov txheej txheem

refresh

Thaum siv scrollspy ua ke nrog kev ntxiv lossis tshem tawm cov ntsiab lus los ntawm DOM, koj yuav tsum hu rau txoj kev hloov tshiab zoo li:

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

pov tseg

Destroys ib lub caij scrollspy. (Tshem cov ntaub ntawv khaws cia ntawm DOM lub caij)

getInstance

Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv scrollspy txuam nrog DOM lub caij

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

getOrCreateInstance

Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv scrollspy txuam nrog DOM lub caij, lossis tsim ib qho tshiab yog tias nws tsis tau pib

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

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-bs-, xws li hauv data-bs-offset="".

Lub npe	Hom	Default	Kev piav qhia
`offset`	tus lej	`10`	Pixels rau offset los ntawm sab saum toj thaum xam txoj hauj lwm ntawm scroll.
`method`	txoj hlua	`auto`	Nrhiav cov seem twg cov ntsiab lus spied nyob hauv `auto`. `offset`yuav siv txoj `Element.getBoundingClientRect()`kev kom tau scroll coordinates. `position`yuav siv cov khoom `HTMLElement.offsetTop`thiab `HTMLElement.offsetLeft`cov khoom kom tau txais scroll coordinates.
`target`	hlua \| jQuery khoom \| DOM Element		Qhia meej lub caij siv Scrollspy plugin.

Cov xwm txheej

Hom xwm txheej	Kev piav qhia
`activate.bs.scrollspy`	Qhov xwm txheej no tua hluav taws rau ntawm lub caij scroll thaum twg ib yam khoom tshiab tau qhib los ntawm scrollspy.

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

Scrollspy

Nws ua haujlwm li cas

Scrollable ntim thiab cov keyboard nkag

Piv txwv hauv navbar

Thawj nqe lus

Ob nqe lus

Peb lub taub hau

Plaub nqe lus

Tshooj tsib

Piv txwv nrog nested nav

Yam khoom 1

Nqe 1-1

Nqe 1-2

Yam khoom 2

Yam khoom 3

Nqe 3-1

Nqe 3-2

Piv txwv nrog cov npe-pab pawg

Yam khoom 1

Yam khoom 2

Yam khoom 3

Yam khoom 4

Kev siv

Los ntawm cov ntaub ntawv attributes

Ntawm JavaScript

Resolvable ID hom phiaj xav tau

Tsis pom lub hom phiaj yam tsis quav ntsej

Cov txheej txheem

refresh

pov tseg

getInstance

getOrCreateInstance

Kev xaiv

Cov xwm txheej