Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
in English

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.

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.

Piv txwv hauv navbar

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

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.

Peb lub taub hau

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.

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

Tshooj tsib

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.

<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

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.

Nqe 1-1

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.

Nqe 1-2

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.

Yam khoom 2

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.

Yam khoom 3

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.

Nqe 3-1

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.

Nqe 3-2

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.

<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

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.

Yam khoom 2

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.

Yam khoom 3

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.

Yam khoom 4

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.

<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. offsetyuav siv txoj Element.getBoundingClientRect()kev kom tau scroll coordinates. positionyuav siv cov khoom HTMLElement.offsetTopthiab HTMLElement.offsetLeftcov 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...
})