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.

Amin'ity pejy ity

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.

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

Lohateny fahatelo

Lohateny fahefatra

Lohateny fahadimy

<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

Andininy 1-1

Andininy 1-2

Andininy faha-2

Andininy faha-3

Andininy faha-3-1

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

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 Andininy faha-2 Andininy faha-3 Andininy faha-4

Item 1

Andininy faha-2

Andininy faha-3

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

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 `auto`ny fomba tsara indrindra hahazoana ny fandrindrana horonan-taratasy. `offset`dia hampiasa ny `Element.getBoundingClientRect()`fomba hahazoana rindran-damina. `position`dia hampiasa ny `HTMLElement.offsetTop`sy ny `HTMLElement.offsetLeft`fananana 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...
})

Scrollspy

Ahoana ny fiasan'izany

Kaontenera azo soratana sy fidirana amin'ny fitendry

Ohatra amin'ny navbar

Lohateny voalohany

Lohateny faharoa

Lohateny fahatelo

Lohateny fahefatra

Lohateny fahadimy

Ohatra misy nested nav

Item 1

Andininy 1-1

Andininy 1-2

Andininy faha-2

Andininy faha-3

Andininy faha-3-1

Andininy faha-3-2

Ohatra amin'ny list-group

Item 1

Andininy faha-2

Andininy faha-3

Andininy faha-4

Fampiasana

Amin'ny alàlan'ny data attributes

Amin'ny JavaScript

Ilaina ny tanjona ID azo vahana

Tsy noraharahiana ireo singa kendrena tsy hita maso

fomba

mamelombelona

Ario

getInstance

getOrCreateInstance

FANDIKANA

zava-mitranga