Scrollspy

Përditësoni automatikisht navigimin e Bootstrap ose listoni komponentët e grupit bazuar në pozicionin e lëvizjes për të treguar se cila lidhje është aktualisht aktive në portin e shikimit.

Në këtë faqe

Si punon

Scrollspy ndërron .activeklasën në elementet e ankorimit ( <a>) kur elementi me idreferencën e ankorimit hreflëviz në pamje. Scrollspy përdoret më së miri së bashku me një komponent navigues Bootstrap ose grup listash , por do të funksionojë gjithashtu me çdo element ankorimi në faqen aktuale. Ja si funksionon.

Për të filluar, scrollspy kërkon dy gjëra: një navigim, grup liste ose një grup të thjeshtë lidhjesh, plus një kontejner të lëvizshëm. Kontejneri i lëvizshëm mund të jetë <body>elementi ose një element i personalizuar me një grup heightdhe overflow-y: scroll.
Në kontejnerin e lëvizshëm, shtoni data-bs-spy="scroll"dhe data-bs-target="#navId"ku navIdështë unike ide navigimit të lidhur. Sigurohuni që të përfshini gjithashtu një tabindex="0"për të siguruar akses në tastierë.
Ndërsa lëvizni në kontejnerin "spiun", një .activeklasë shtohet dhe hiqet nga lidhjet e ankorimit brenda navigimit të lidhur. Lidhjet duhet të kenë idobjektiva të zgjidhshëm, përndryshe ato injorohen. Për shembull, një <a href="#home">home</a>duhet të korrespondojë me diçka në DOM si<div id="home"></div>
Elementet e synuar që nuk janë të dukshëm do të shpërfillen. Shihni seksionin e elementeve jo të dukshme më poshtë.

Shembuj

Lëvizni zonën poshtë shiritit të navigimit dhe shikoni ndryshimin e klasës aktive. Hapni menynë rënëse dhe shikoni gjithashtu të theksohen artikujt në listë.

Titulli i parë

Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.

Kreu i dytë

Kreu i tretë

Kreu i katërt

Kreu i pestë

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

Navigacion i mbivendosur

Scrollspy gjithashtu punon me .navs të mbivendosur. Nëse një fole .navështë .active, prindërit e tij do të jenë gjithashtu .active. Lëvizni zonën pranë shiritit të navigimit dhe shikoni ndryshimin e klasës aktive.

Pika 1

Mbani në mend se shtojca JavaScript përpiqet të zgjedhë elementin e duhur midis gjithçkaje që mund të jetë e dukshme. Disa objektiva të dukshëm në të njëjtën kohë mund të shkaktojnë disa probleme.

Pika 1-1

Pika 1-2

Pika 2

Pika 3

Pika 3-1

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

Lista e grupit

Scrollspy gjithashtu punon me .list-groups. Lëvizni zonën pranë grupit të listës dhe shikoni ndryshimin e klasës aktive.

Pika 1 Pika 2 Pika 3 Pika 4

Pika 1

Pika 2

Pika 3

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

Spiranca të thjeshta

Scrollspy nuk është i kufizuar në komponentët navigues dhe grupet e listave, kështu që do të funksionojë në çdo <a>element ankorimi në dokumentin aktual. Lëvizni zonën dhe shikoni .activendryshimin e klasës.

Pika 1 Pika 2 Pika 3 Pika 4 Pika 5

Pika 1

Pika 2

Pika 3

Pika 4

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

Elemente të padukshme

Elementet e synuar që nuk janë të dukshëm do të shpërfillen dhe artikujt e tyre përkatës të navigimit nuk do të marrin një .activeklasë. Instancat Scrollspy të inicializuara në një mbështjellës jo të dukshëm do të injorojnë të gjithë elementët e synuar. Përdorni refreshmetodën për të kontrolluar për elementë të vëzhgueshëm pasi mbështjellësi të bëhet i dukshëm.

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()
  })
})

Përdorimi

Nëpërmjet atributeve të të dhënave

Për të shtuar me lehtësi sjelljen e scrollspy në navigimin tuaj të shiritit të sipërm, shtoni data-bs-spy="scroll"te elementi që dëshironi të spiunoni (më së shpeshti kjo do të ishte <body>). Më pas shtoni data-bs-targetatributin me emrin idose klasën e elementit prind të çdo .navkomponenti Bootstrap.

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Përmes JavaScript

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

Opsione

Meqenëse opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript, ju mund të shtoni një emër opsioni në data-bs-, si në data-bs-animation="{value}". Sigurohuni që të ndryshoni llojin e rastit të emrit të opsionit nga “ CamelCase ” në “ kebab-case ” kur kaloni opsionet përmes atributeve të të dhënave. Për shembull, përdorni data-bs-custom-class="beautifier"në vend të data-bs-customClass="beautifier".

Që nga Bootstrap 5.2.0, të gjithë komponentët mbështesin një atribut eksperimental të të dhënave të rezervuara data-bs-configqë mund të vendosë konfigurimin e thjeshtë të komponentit si një varg JSON. Kur një element ka data-bs-config='{"delay":0, "title":123}'dhe data-bs-title="456"atribute, titlevlera përfundimtare do të jetë 456dhe atributet e veçanta të të dhënave do të zëvendësojnë vlerat e dhëna në data-bs-config. Përveç kësaj, atributet ekzistuese të të dhënave janë në gjendje të strehojnë vlera JSON si data-bs-delay='{"show":0,"hide":150}'.

Emri	Lloji	E paracaktuar	Përshkrim
`rootMargin`	varg	`0px 0px -25%`	Vëzhguesi i kryqëzimit rootMargin njësi të vlefshme, kur llogaritet pozicioni i lëvizjes.
`smoothScroll`	logjike	`false`	Aktivizon lëvizjen e qetë kur një përdorues klikon në një lidhje që i referohet vëzhguesve ScrollSpy.
`target`	varg, element DOM	`null`	Përcakton elementin për të aplikuar shtesën Scrollspy.
`threshold`	varg	`[0.1, 0.5, 1]`	`IntersectionObserver` hyrje e vlefshme e pragut , kur llogaritet pozicioni i lëvizjes.

Opsione të vjetruara

Deri në versionin 5.1.3 ne përdornim offset& methodopsione, të cilat tani janë të vjetruara dhe të zëvendësuara me rootMargin. Për të mbajtur përputhshmërinë e prapambetur, ne do të vazhdojmë të analizojmë një të dhënë offsetpër rootMargin, por kjo veçori do të hiqet në v6 .

Metodat

Metoda	Përshkrim
`dispose`	Shkatërron rrotullimin e një elementi. (Heq të dhënat e ruajtura në elementin DOM)
`getInstance`	Metoda statike për të marrë shembullin scrollspy të lidhur me një element DOM.
`getOrCreateInstance`	Metoda statike për të marrë shembullin scrollspy të lidhur me një element DOM, ose për të krijuar një të ri në rast se nuk ishte inicializuar.
`refresh`	Kur shtoni ose hiqni elementë në DOM, do t'ju duhet të telefononi metodën e rifreskimit.

Këtu është një shembull duke përdorur metodën e rifreskimit:

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

Ngjarjet

Ngjarje	Përshkrim
`activate.bs.scrollspy`	Kjo ngjarje ndizet në elementin rrotullues sa herë që aktivizohet një spirancë nga scrollspy.

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