Scrollspy

Aġġorna awtomatikament in-navigazzjoni Bootstrap jew elenka l-komponenti tal-grupp ibbażati fuq il-pożizzjoni tal-iscroll biex tindika liema link hija attwalment attiva fil-viewport.

Fuq din il-paġna

Kif taħdem

Scrollspy ibiddel il- .activeklassi fuq l-elementi ta' l-ankra ( <a>) meta l-element bir- idreferenza ta' l-ankra hrefjiġi skrolljat fid-dawl. Scrollspy huwa l-aħjar użat flimkien ma ' komponent Bootstrap nav jew grupp ta' lista , iżda se jaħdem ukoll ma 'kwalunkwe element ta' ankra fil-paġna kurrenti. Ara kif taħdem.

Biex tibda, scrollspy teħtieġ żewġ affarijiet: navigazzjoni, grupp ta 'lista, jew sett sempliċi ta' links, flimkien ma 'kontenitur li jista' jiskrollja. Il-kontenitur li jista 'jiskrollja jista' jkun il- <body>jew element tad-dwana b'sett heightu overflow-y: scroll.
Fuq il-kontenitur li jista 'jskrollja, żid data-bs-spy="scroll"u data-bs-target="#navId"fejn navIdhuwa l-uniku idtan-navigazzjoni assoċjata. Kun żgur li tinkludi wkoll a tabindex="0"biex tiżgura aċċess għat-tastiera.
Hekk kif tiskrollja l-kontenitur "spijat", .activetiżdied u titneħħa klassi mill-links tal-ankri fin-navigazzjoni assoċjata. Il-links għandu jkollhom idmiri riżolvibbli, inkella jiġu injorati. Per eżempju, <a href="#home">home</a>għandu jikkorrispondi għal xi ħaġa fid-DOM simili<div id="home"></div>
Elementi fil-mira li mhumiex viżibbli se jiġu injorati. Ara t - taqsima Elementi mhux viżibbli hawn taħt.

Eżempji

Skrollja ż-żona taħt in-navbar u ara l-bidla fil-klassi attiva. Iftaħ il-menu dropdown u ara l-oġġetti dropdown jiġu enfasizzati wkoll.

L-ewwel intestatura

Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.

It-tieni intestatura

It-tielet intestatura

Ir-raba' intestatura

Il-ħames intestatura

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

Nav imniżżel

Scrollspy jaħdem ukoll ma nested .navs. Jekk nested .navhuwa .active, il-ġenituri tiegħu se jkunu wkoll .active. Skrollja ż-żona ħdejn in-navbar u ara l-bidla tal-klassi attiva.

Punt 1

Żomm f'moħħok li l-plugin JavaScript jipprova jagħżel l-element it-tajjeb fost dak kollu li jista 'jkun viżibbli. Miri multipli scrollspy viżibbli fl-istess ħin jistgħu jikkawżaw xi kwistjonijiet.

Punt 1-1

Punt 1-2

Punt 2

Punt 3

Punt 3-1

Punt 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 tal-grupp

Scrollspy jaħdem ukoll ma ' .list-groups. Skrollja ż-żona ħdejn il-grupp tal-lista u ara l-bidla tal-klassi attiva.

Punt 1 Punt 2 Punt 3 Punt 4

Punt 1

Punt 2

Punt 3

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

Ankri sempliċi

Scrollspy mhuwiex limitat għall-komponenti tan-nav u l-gruppi tal-lista, għalhekk se jaħdem fuq kwalunkwe <a>element ta 'ankra fid-dokument kurrenti. Skrollja ż-żona u ara l- .activebidla fil-klassi.

Punt 1 Punt 2 Punt 3 Punt 4 Punt 5

Punt 1

Punt 2

Punt 3

Punt 4

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

Elementi mhux viżibbli

Elementi fil-mira li mhumiex viżibbli se jiġu injorati u l-oġġetti tan-nav korrispondenti tagħhom mhux se jirċievu .activeklassi. L-istanzi ta 'scrollspy inizjalizzati f'tgeżwir mhux viżibbli se jinjoraw l-elementi kollha fil-mira. Uża l- refreshmetodu biex tiċċekkja għal elementi osservabbli ladarba t-tgeżwir isir viżibbli.

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

Użu

Via attributi tad-data

Biex iżżid faċilment l-imġieba scrollspy man-navigazzjoni topbar tiegħek, żid data-bs-spy="scroll"mal-element li trid tispija fuqu (l-aktar tipikament dan ikun il- <body>). Imbagħad żid l- data-bs-targetattribut bl- idisem jew klassi tal-element ġenitur ta 'kwalunkwe .navkomponent 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>

Via JavaScript

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

Għażliet

Peress li l-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript, tista' tehmeż isem ta' għażla ma' data-bs-, bħal f' data-bs-animation="{value}". Kun żgur li tbiddel it-tip tal-każ tal-isem tal-għażla minn " camelCase " għal " kebab-case " meta tgħaddi l-għażliet permezz tal-attributi tad-dejta. Per eżempju, uża data-bs-custom-class="beautifier"minflok data-bs-customClass="beautifier".

Minn Bootstrap 5.2.0, il-komponenti kollha jappoġġaw attribut ta' data riżervat sperimentalidata-bs-config li jista' jospita konfigurazzjoni ta' komponent sempliċi bħala string JSON. Meta element ikollu data-bs-config='{"delay":0, "title":123}'u data-bs-title="456"attributi, il- titlevalur finali se jkun 456u l-attributi tad-dejta separati jegħlbu l-valuri mogħtija fuq data-bs-config. Barra minn hekk, l-attributi tad-dejta eżistenti jistgħu jospitaw valuri JSON bħal data-bs-delay='{"show":0,"hide":150}'.

Isem	Tip	Default	Deskrizzjoni
`rootMargin`	spag	`0px 0px -25%`	Intersection Observer rootMargin unitajiet validi, meta tikkalkula l-pożizzjoni tal-iscroll.
`smoothScroll`	boolean	`false`	Jippermetti scrolling bla xkiel meta utent jikklikkja fuq link li tirreferi għal osservabbli ScrollSpy.
`target`	spag, element DOM	`null`	Jispeċifika l-element biex japplika Scrollspy plugin.
`threshold`	firxa	`[0.1, 0.5, 1]`	`IntersectionObserver` input validu tal- limitu , meta tikkalkula l-pożizzjoni tal-iscroll.

Għażliet Deprecated

Sa v5.1.3 konna nużaw offset& methodgħażliet, li issa huma deprecati u sostitwiti minn rootMargin. Biex inżommu l-kompatibilità b'lura, aħna se nkomplu naqsbu xi partikolari offsetgħal rootMargin, iżda din il-karatteristika se titneħħa f'v6 .

Metodi

Metodu	Deskrizzjoni
`dispose`	Jeqred scrollspy ta' element. (Tneħħi d-dejta maħżuna fuq l-element DOM)
`getInstance`	Metodu statiku biex tikseb l-istanza scrollspy assoċjata ma 'element DOM.
`getOrCreateInstance`	Metodu statiku biex tikseb l-istanza scrollspy assoċjata ma 'element DOM, jew biex toħloq waħda ġdida f'każ li ma kinitx inizjalizzata.
`refresh`	Meta żżid jew tneħħi elementi fid-DOM, ikollok bżonn issejjaħ il-metodu ta 'aġġornament.

Hawn eżempju bl-użu tal-metodu ta 'aġġornament:

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

Avvenimenti

Avveniment	Deskrizzjoni
`activate.bs.scrollspy`	Dan l-avveniment jispara fuq l-element tal-iscroll kull meta ankra tiġi attivata mill-iscrollspy.

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