Laktawan sa panguna nga sulud Laktaw sa docs navigation
in English

Scrollspy

Awtomatikong i-update ang Bootstrap navigation o ilista ang mga component sa grupo base sa posisyon sa scroll aron ipakita kung unsang link ang aktibo karon sa viewport.

Niini nga panid

Giunsa kini paglihok

Ang Scrollspy adunay pipila ka mga kinahanglanon aron molihok sa hustong paagi:

  • Kinahanglan kini gamiton sa usa ka Bootstrap nav component o list group .
  • Ang Scrollspy nagkinahanglan position: relative;sa elemento nga imong gipanid-an, kasagaran ang <body>.
  • Ang mga angkla ( <a>) gikinahanglan ug kinahanglang magtudlo sa usa ka elemento uban niana id.

Kung malampuson nga gipatuman, ang imong nav o lista nga grupo mag-update sumala niana, ibalhin ang .activeklase gikan sa usa ka butang ngadto sa sunod base sa ilang kauban nga mga target.

Mga scrollable nga sudlanan ug pag-access sa keyboard

Kung naghimo ka ug scrollable nga sudlanan (gawas sa <body>), siguroha nga adunay usa ka heightset ug overflow-y: scroll;i-apply niini-uban sa usa tabindex="0"aron masiguro ang pag-access sa keyboard.

Pananglitan sa navbar

I-scroll ang dapit ubos sa navbar ug tan-awa ang aktibong kausaban sa klase. Ang dropdown nga mga butang i-highlight usab.

Unang ulohan

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

Ikaduha nga ulohan

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

Ikatulo nga ulohan

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

Ikaupat nga ulohan

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

Ikalima nga ulohan

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

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

Pananglitan nga adunay nested nav

Scrollspy usab nagtrabaho uban sa nested .navs. Kung ang usa ka salag .nav, .activeang mga ginikanan niini usab .active. Pag-scroll sa lugar tapad sa navbar ug tan-awa ang aktibo nga pagbag-o sa klase.

aytem 1

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

Butang 1-1

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

Butang 1-2

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

aytem 2

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

aytem 3

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

aytem 3-1

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

aytem 3-2

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

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

Pananglitan nga adunay listahan-grupo

Scrollspy usab nagtrabaho uban sa .list-groups. I-scroll ang dapit tapad sa listahan nga grupo ug tan-awa ang aktibong kausaban sa klase.

aytem 1

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

aytem 2

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

aytem 3

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

aytem 4

Kini mao ang pipila ka placeholder sulod alang sa scrollspy panid. Timan-i nga samtang nag-scroll ka sa panid, ang angay nga link sa nabigasyon gipasiugda. Gisubli kini sa tibuok nga pananglitan sa component. Nagpadayon kami sa pagdugang sa pipila ka pananglitan nga kopya dinhi aron ipasiugda ang pag-scroll ug pag-highlight.

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

Paggamit

Pinaagi sa data attributes

Aron dali nga makadugang sa scrollspy nga kinaiya sa imong topbar navigation, idugang data-bs-spy="scroll"sa elemento nga gusto nimong espiya (kasagaran kini mao ang <body>). Dayon idugang ang data-bs-targetattribute nga adunay ID o klase sa ginikanan nga elemento sa bisan unsang .navbahin sa Bootstrap.

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>

Pinaagi sa JavaScript

Human sa pagdugang position: relative;sa imong CSS, tawga ang scrollspy pinaagi sa JavaScript:

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

Resolvable ID target gikinahanglan

Ang mga link sa Navbar kinahanglan adunay masulbad nga mga target sa id. Pananglitan, <a href="#home">home</a>kinahanglan nga katumbas sa usa ka butang sa DOM sama sa <div id="home"></div>.

Ang dili makita nga target nga mga elemento gibalewala

Ang mga target nga elemento nga dili makita ibaliwala ug ang ilang katugbang nga nav nga mga butang dili gayud ma-highlight.

Pamaagi

pag-refresh

Kung gigamit ang scrollspy kauban ang pagdugang o pagtangtang sa mga elemento gikan sa DOM, kinahanglan nimo nga tawagan ang pamaagi sa pag-refresh sama niini:

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

ilabay

Makaguba sa scrollspy sa usa ka elemento. (Gikuha ang gitipigan nga datos sa elemento sa DOM)

getInstance

Static nga pamaagi nga nagtugot kanimo sa pagkuha sa scrollspy nga pananglitan nga may kalabutan sa usa ka elemento sa DOM

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

getOrCreateInstance

Static nga pamaagi nga nagtugot kanimo sa pagkuha sa scrollspy nga pananglitan nga may kalabutan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.

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

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-bs-, sama sa data-bs-offset="".

Ngalan Matang Default Deskripsyon
offset numero 10 Ang mga pixel aron ma-offset gikan sa taas kung kalkulado ang posisyon sa scroll.
method hilo auto Ang pagpangita kung asa nga seksyon ang gipanid-an nga elemento auto. offsetgamiton ang Element.getBoundingClientRect()pamaagi aron makakuha mga scroll coordinates. positiongamiton ang HTMLElement.offsetTopug HTMLElement.offsetLeftmga kabtangan aron makakuha og mga scroll coordinates.
target hilo | jQuery butang | DOM nga elemento Gipiho ang elemento aron magamit ang Scrollspy plugin.

Mga panghitabo

Uri sa panghitabo Deskripsyon
activate.bs.scrollspy Kini nga panghitabo nagdilaab sa scroll nga elemento sa matag higayon nga ang usa ka bag-ong butang ma-activate sa scrollspy. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})