Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
in English

Scrollspy

Havaozy ho azy ny fitetezana Bootstrap na tanisao ireo singa vondrona mifototra amin'ny toeran'ny horonam-boky mba hanondroana hoe iza amin'ireo rohy no mavitrika ao amin'ny seranan-tsambo.

Ahoana ny fiasan'izany

Scrollspy dia manana fepetra vitsivitsy mba hiasa tsara:

  • Tsy maintsy ampiasaina amin'ny singa Bootstrap nav na vondrona lisitra izy io .
  • Scrollspy dia mitaky position: relative;amin'ny singa tsikilovanao, matetika ny <body>.
  • Ny vatofantsika ( <a>) dia takiana ary tsy maintsy manondro singa iray miaraka amin'izany id.

Rehefa vita soa aman-tsara dia havaozina mifanaraka amin'izany ny nav na lisitry ny vondronao, hamindra ny .activekilasy avy amin'ny singa iray mankany amin'ny manaraka mifototra amin'ny tanjona mifandraika amin'izy ireo.

Kaontenera azo soratana sy fidirana amin'ny fitendry

Raha manao fitoeran-javatra azo soratana ianao (ankoatra ny <body>), ataovy azo antoka fa manana andiana iray ianao heightary overflow-y: scroll;ampiharina aminy—miaraka amin'ny a tabindex="0"hiantohana ny fidiran'ny fitendry.

Ohatra amin'ny navbar

Soraty eo ambanin'ny navbar ny faritra ary jereo ny fiovan'ny kilasy mavitrika. Hasongadina ihany koa ireo singa midina.

Lohateny voalohany

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

Lohateny faharoa

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

Lohateny fahatelo

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

Lohateny fahefatra

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

Lohateny fahadimy

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

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

Ohatra misy nested nav

Scrollspy koa dia miasa amin'ny nested .navs. Raha misy akany .navdia .active, ny ray aman-dreniny dia ho .active. Horohoho ny faritra eo akaikin'ny navbar ary jereo ny fiovan'ny kilasy mavitrika.

Item 1

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

Andininy 1-1

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

Andininy 1-2

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

Andininy faha-2

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

Andininy faha-3

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

Andininy faha-3-1

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

Andininy faha-3-2

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

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

Ohatra amin'ny list-group

Scrollspy koa dia miasa amin'ny .list-groups. Soraty eo akaikin'ny vondrona lisitra ilay faritra ary jereo ny fiovan'ny kilasy mavitrika.

Item 1

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

Andininy faha-2

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

Andininy faha-3

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

Andininy faha-4

Ity dia votoaty mpihazona toerana ho an'ny pejy scrollspy. Mariho fa rehefa midina midina ny pejy ianao dia misongadina ny rohy fitetezana mety. Miverimberina manerana ny ohatra singa. Mbola manampy kopia ohatra hafa eto izahay mba hanamafisana ny horonana sy fanasongadinana.

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

Fampiasana

Amin'ny alàlan'ny data attributes

Raha te hampiditra mora foana ny fihetsika scrollspy amin'ny navigateur topbar dia ampio data-bs-spy="scroll"amin'ny singa tianao hitsikilo (matetika dia ity no <body>). Avy eo dia ampio ny data-bs-targettoetra miaraka amin'ny ID na kilasy amin'ny singa ray amin'ny singa Bootstrap rehetra .nav.

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>

Amin'ny JavaScript

Rehefa avy nampidirina position: relative;tao amin'ny CSS-nao, antsoy ny scrollspy amin'ny alàlan'ny JavaScript:

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

Ilaina ny tanjona ID azo vahana

Ny rohy Navbar dia tsy maintsy manana tanjona id azo vahana. Ohatra, <a href="#home">home</a>tsy maintsy mifanaraka amin'ny zavatra ao amin'ny DOM toy ny <div id="home"></div>.

Tsy noraharahiana ireo singa kendrena tsy hita maso

Ny singa kendrena izay tsy hita dia tsy hojerena ary tsy hasongadina na oviana na oviana ireo singa nav mifanaraka aminy.

fomba

mamelombelona

Rehefa mampiasa scrollspy miaraka amin'ny fanampiana na fanesorana singa ao amin'ny DOM ianao dia mila miantso ny fomba fanavaozana toy izao:

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

Ario

Manimba ny scrollspy an'ny singa iray. (Esory ny angona voatahiry amin'ny singa DOM)

getInstance

Fomba static izay ahafahanao mahazo ny ohatra scrollspy mifandray amin'ny singa DOM

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

getOrCreateInstance

Fomba static izay ahafahanao mahazo ny ohatra scrollspy mifandray amin'ny singa DOM, na mamorona vaovao raha toa ka tsy natomboka izany

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-bs-, toy ny ao amin'ny data-bs-offset="".

Anarana Type toerana misy anao Description
offset isa 10 Pikaola ho entin'ny tampony rehefa manao kajy ny toeran'ny horonam-boky.
method tady auto Hifidy autony fomba tsara indrindra hahazoana ny fandrindrana horonan-taratasy. offsetdia hampiasa ny Element.getBoundingClientRect()fomba hahazoana rindran-damina. positiondia hampiasa ny HTMLElement.offsetTopsy ny HTMLElement.offsetLeftfananana mba hahazoana rindran-damina.
target string | jQuery object | singa DOM Manondro singa hampiharana ny plugin Scrollspy.

zava-mitranga

Karazana hetsika Description
activate.bs.scrollspy Ity hetsika ity dia mirehitra amin'ny singa horonam-boky isaky ny misy singa vaovao velomin'ny scrollspy.
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})