Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
in English

Scrollspy

Awtomatikong i-update ang Bootstrap navigation o ilista ang mga bahagi ng pangkat batay sa posisyon ng pag-scroll upang isaad kung aling link ang kasalukuyang aktibo sa viewport.

Sa pahinang ito

Paano ito gumagana

May ilang kinakailangan ang Scrollspy upang gumana nang maayos:

  • Dapat itong gamitin sa isang Bootstrap nav component o list group .
  • Kinakailangan ng Scrollspy position: relative;ang elementong tinitiktikan mo, kadalasan ang <body>.
  • Ang mga anchor ( <a>) ay kinakailangan at dapat tumuro sa isang elemento na may ganyan id.

Kapag matagumpay na naipatupad, ang iyong nav o list group ay mag-a-update nang naaayon, na inililipat ang .activeklase mula sa isang item patungo sa susunod batay sa kanilang nauugnay na mga target.

Mga na-scroll na lalagyan at access sa keyboard

Kung gagawa ka ng isang na-scroll na lalagyan (maliban sa <body>), tiyaking may heightset at overflow-y: scroll;inilapat dito—sa tabi ng isang tabindex="0"upang matiyak ang pag-access sa keyboard.

Halimbawa sa navbar

Mag-scroll sa lugar sa ibaba ng navbar at panoorin ang aktibong pagbabago ng klase. Ang mga dropdown na item ay iha-highlight din.

Unang heading

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

Pangalawang heading

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

Pangatlong heading

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

Pang-apat na heading

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

Ikalimang heading

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at 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>

Halimbawa na may nested nav

Gumagana rin ang Scrollspy sa nested .navs. Kung ang isang nested .navay .active, ang mga magulang nito ay magiging .active. Mag-scroll sa lugar sa tabi ng navbar at panoorin ang aktibong pagbabago ng klase.

aytem 1

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

Aytem 1-1

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

Aytem 1-2

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

aytem 2

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

aytem 3

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

Aytem 3-1

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

Aytem 3-2

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at 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>

Halimbawa na may list-group

Gumagana rin ang Scrollspy sa .list-groups. Mag-scroll sa lugar sa tabi ng listahan ng pangkat at panoorin ang aktibong pagbabago ng klase.

aytem 1

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

aytem 2

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

aytem 3

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at pag-highlight.

aytem 4

Ito ay ilang placeholder na nilalaman para sa scrollspy page. Tandaan na habang nag-i-scroll ka pababa sa pahina, naka-highlight ang naaangkop na link sa pag-navigate. Ito ay paulit-ulit sa buong halimbawa ng bahagi. Patuloy kaming nagdaragdag ng ilang halimbawang kopya dito upang bigyang-diin ang pag-scroll at 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

Sa pamamagitan ng mga katangian ng data

Upang madaling magdagdag ng scrollspy na gawi sa iyong topbar navigation, idagdag data-bs-spy="scroll"sa elementong gusto mong tiktikan (kadalasan ay ito ang <body>). Pagkatapos ay idagdag ang data-bs-targetattribute na may ID o klase ng parent element ng anumang .navbahagi ng 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>

Sa pamamagitan ng JavaScript

Pagkatapos idagdag position: relative;sa iyong CSS, tawagan ang scrollspy sa pamamagitan ng JavaScript:

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

Kinakailangan ang mga nareresolbang ID na target

Ang mga link sa Navbar ay dapat may mga nareresolbang id target. Halimbawa, ang isang ay <a href="#home">home</a>dapat na tumutugma sa isang bagay sa DOM tulad ng <div id="home"></div>.

Binalewala ang mga hindi nakikitang target na elemento

Ang mga target na elemento na hindi nakikita ay hindi papansinin at ang kanilang mga kaukulang nav item ay hindi kailanman mai-highlight.

Paraan

refresh

Kapag gumagamit ng scrollspy kasabay ng pagdaragdag o pag-alis ng mga elemento mula sa DOM, kakailanganin mong tawagan ang paraan ng pag-refresh tulad nito:

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

itapon

Sinisira ang scrollspy ng isang elemento. (Aalisin ang nakaimbak na data sa elemento ng DOM)

getInstance

Static na paraan na nagbibigay-daan sa iyong makuha ang scrollspy instance na nauugnay sa isang elemento ng DOM

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

getOrCreateInstance

Static na paraan na nagbibigay-daan sa iyong makuha ang scrollspy instance na nauugnay sa isang elemento ng DOM, o gumawa ng bago kung sakaling hindi ito nasimulan

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-bs-, tulad ng sa data-bs-offset="".

Pangalan Uri Default Paglalarawan
offset numero 10 Mga pixel na i-offset mula sa itaas kapag kinakalkula ang posisyon ng scroll.
method string auto Hahanapin kung saang seksyon naroroon ang spied element. autoPipiliin ang pinakamahusay na paraan upang makakuha ng mga scroll coordinates. offsetgagamit ng Element.getBoundingClientRect()paraan para makakuha ng mga scroll coordinates. positiongagamit ng HTMLElement.offsetTopat HTMLElement.offsetLeftproperties para makakuha ng scroll coordinates.
target string | jQuery object | DOM na elemento Tinutukoy ang elementong ilalapat ng Scrollspy plugin.

Mga kaganapan

Uri ng kaganapan Paglalarawan
activate.bs.scrollspy Ang kaganapang ito ay gumagana sa scroll element sa tuwing may bagong item na na-activate ng scrollspy. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})