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 mamindra ny .activekilasy amin'ny <a>singa vatofantsika () rehefa mihodinkodina ho hita ilay singa misy ny idtondroin'ny vatofantsika href. Ny Scrollspy dia tsara indrindra ampiasaina miaraka amin'ny singa Bootstrap nav na vondrona lisitra , fa hiasa miaraka amin'ireo singa vatofantsika ao amin'ny pejy ankehitriny ihany koa. Toy izao ny fomba fiasany.

Hanombohana, mila zavatra roa ny scrollspy: fitetezana, vondrona lisitra, na rohy tsotra, miampy fitoeran-javatra azo adika. Ny kaontenera azo soratana dia mety ho ny <body>na singa manokana misy set heightsy overflow-y: scroll.
Ao amin'ny fitoeran'entana azo scrolling, ampio data-bs-spy="scroll"ary data-bs-target="#navId"aiza navIdny mampiavaka idny fitetezana mifandray. Aza hadino koa ny mampiditra a tabindex="0"mba hiantohana ny fidiran'ny klavier.
Rehefa manodina ny kaontenera "tsikilo" ianao, .activedia ampiana sy esorina amin'ny rohy vatofantsika ny kilasy iray ao anatin'ny fitetezana mifandray. Ny rohy dia tsy maintsy manana idtanjona azo vahana, raha tsy izany dia tsy raharahaina. Ohatra, <a href="#home">home</a>tsy maintsy mifanaraka amin'ny zavatra ao amin'ny DOM toa<div id="home"></div>
Ny singa kendrena izay tsy hita dia tsy horaharahaina. Jereo ny fizarana singa tsy hita etsy ambany.

OHATRA

Soraty eo ambanin'ny navbar ny faritra ary jereo ny fiovan'ny kilasy mavitrika. Sokafy ny menio midina ary jereo ireo singa midina ho asongadina ihany koa.

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 bg-light px-3 mb-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-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" 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>

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

Ataovy ao an-tsaina fa ny plugin JavaScript dia manandrana misafidy ny singa mety amin'ny zavatra rehetra mety ho hita. Ny kendrena scrollspy maromaro hita amin'ny fotoana iray dia mety hiteraka olana sasany.

Andininy 1-1

Andininy 1-2

Andininy faha-2

Andininy faha-3

Andininy faha-3-1

Andininy faha-3-2

<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <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>

  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>...</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>...</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>...</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>...</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>...</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>...</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

Vondrona lisitra

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 class="row">
  <div class="col-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>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" 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>
  </div>
</div>

Vatofantsika tsotra

Ny Scrollspy dia tsy voafetra amin'ny singa nav sy vondrona lisitra, noho izany dia hiasa amin'ny <a>singa vatofantsika rehetra ao amin'ny antontan-taratasy ankehitriny. Soraty ny faritra ary jereo ny .activefiovan'ny kilasy.

Item 1 Andininy faha-2 Andininy faha-3 Andininy faha-4 Andininy faha-5

Item 1

Andininy faha-2

Andininy faha-3

Andininy faha-4

Andininy faha-5

<div class="row">
  <div class="col-4">
    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="simple-list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="simple-list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="simple-list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="simple-list-item-4">Item 4</h4>
      <p>...</p>
      <h4 id="simple-list-item-5">Item 5</h4>
      <p>...</p>
    </div>
  </div>
</div>

Singa tsy hita maso

Ny singa kendrena izay tsy hita dia tsy hojerena ary tsy hahazo .activekilasy ny singa nav mifanaraka aminy. Ny tranga Scrollspy natomboka tamin'ny fonosana tsy hita maso dia tsy hiraharaha ireo singa kendrena rehetra. Ampiasao ny refreshfomba hijerena ireo singa azo jerena rehefa hita ny fonony.

document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
  el.addEventListener('shown.bs.tab', () => {
    const target = el.getAttribute('data-bs-target')
    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
  })
})

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 idanaran'ny kilasy na ny singa ray amin'ny singa Bootstrap rehetra .nav.

<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

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

FANDIKANA

Satria azo ampitaina amin'ny alàlan'ny toetran'ny data na JavaScript ny safidy, azonao atao ny manisy anarana safidy amin'ny data-bs-, toy ny ao amin'ny data-bs-animation="{value}". Ataovy azo antoka fa hanova ny karazana tranga amin'ny anarana safidy avy amin'ny " CamelCase " ho " kebab-case " rehefa mandalo ny safidy amin'ny alàlan'ny toetran'ny data. Ohatra, ampiasao data-bs-custom-class="beautifier"fa tsy data-bs-customClass="beautifier".

Amin'ny Bootstrap 5.2.0, ny singa rehetra dia manohana toetra angon-drakitra natokana ho an'ny fanandramanadata-bs-config izay afaka mametraka ny fandrindrana singa tsotra ho tady JSON. Rehefa manana data-bs-config='{"delay":0, "title":123}'sy data-bs-title="456"toetra ny singa iray, dia ny titlesanda farany 456ary ny toetran'ny angon-drakitra misaraka dia hanongotra ny sanda omena amin'ny data-bs-config. Ankoatr'izay, ny toetran'ny data efa misy dia afaka mametraka ny sanda JSON toy ny data-bs-delay='{"show":0,"hide":150}'.

Anarana	Type	toerana misy anao	Description
`rootMargin`	tady	`0px 0px -25%`	Intersection Observer rootMargin singa manan-kery, rehefa manao kajy ny toerana misy horonan-taratasy.
`smoothScroll`	boolean	`false`	Mamela ny horonan-tsary milamina rehefa misy mpampiasa manindry rohy izay manondro ny ScrollSpy azo jerena.
`target`	string, singa DOM	`null`	Manondro singa hampiharana ny plugin Scrollspy.
`threshold`	fihaingoana	`[0.1, 0.5, 1]`	`IntersectionObserver` tokonam -baravarana fidirana manan-kery, rehefa manao kajy ny toerana misy horonan-taratasy.

Safidy tsy ampiasaina

Hatramin'ny v5.1.3 dia nampiasa offset& methodsafidy izahay, izay tsy ampiasaina intsony ary nosoloina rootMargin. Mba hitazonana ny fifanandrinana mihemotra, dia hanohy ny famakafakana nomena offsetny rootMargin, fa ity endri-javatra ity dia hesorina amin'ny v6 .

fomba

FOMBA	Description
`dispose`	Manimba ny scrollspy an'ny singa iray. (Esory ny angona voatahiry amin'ny singa DOM)
`getInstance`	Fomba static hahazoana ny ohatra scrollspy mifandray amin'ny singa DOM.
`getOrCreateInstance`	Fomba static hahazoana ny ohatra scrollspy mifandray amin'ny singa DOM, na hamorona vaovao raha toa ka tsy natomboka izany.
`refresh`	Rehefa manampy na manala singa ao amin'ny DOM ianao dia mila miantso ny fomba fanavaozana.

Ity misy ohatra iray mampiasa ny fomba fanavaozana:

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

zava-mitranga

Event	Description
`activate.bs.scrollspy`	Ity hetsika ity dia mirehitra amin'ny singa horonam-boky isaky ny misy vatofantsika iray ampiasain'ny scrollspy.

const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
  // do something...
})