Scrollspy

“Bootstrap” nawigasiýasyny awtomatiki usulda täzeläň ýa-da häzirki baglanyşykda haýsy baglanyşygyň işjeňdigini görkezmek üçin aýlaw ýagdaýyna esaslanýan topar böleklerini sanaň.

Bu sahypada

Bu nähili işleýär

Scrollspy, labyrda görkezilen element göz öňünde tutulanda, labyr .active( <a>) elementlerinde synpy üýtgedýär . Scrollspy “Bootstrap nav” komponenti ýa-da sanaw topary bilen bilelikde iň oňat ulanylýar , emma häzirki sahypadaky islendik labyr elementleri bilen hem işleşer. Ine, bu nähili işleýär.idhref

Başlamak üçin, scrollspy iki zady talap edýär: nawigasiýa, sanaw topary ýa-da ýönekeý baglanyşyklar toplumy, şeýle hem aýlap bolýan gap. Aýlanyp bolýan konteýner toplumly we <body>adaty element bolup biler heightwe overflow-y: scroll.
Aýlanyp bolýan gapda, baglanyşykly nawigasiýanyň özboluşly ýerini goşuň data-bs-spy="scroll"we data-bs-target="#navId"nirede . Klawiaturanyň elýeterliligini üpjün etmek üçin hökman goşuň.navIdidtabindex="0"
“Içaly” konteýner aýlanyňyzda .active, degişli nawigasiýanyň içindäki labyr baglanyşyklaryndan bir synp goşulýar we aýrylýar. Salgylarda çözülip bilinjek idnyşanlar bolmaly, ýogsam ähmiýet berilmeýär. Mysal üçin, <a href="#home">home</a>DOM-daky ýaly bir zada laýyk bolmaly<div id="home"></div>
Görünmeýän nyşan elementleri hasaba alynmaz. Aşakda görünmeýän elementler bölümine serediň .

Mysallar

Deňiz paneliniň aşagyndaky meýdany aýlaň we işjeň synp üýtgemegine tomaşa ediň. Açylýan menýuny açyň we açylýan zatlaryň hem görkezilmegine tomaşa ediň.

Ilki sözbaşy

Bu, scrollspy sahypasy üçin ýer eýesi mazmuny. Sahypany aşak aýlanyňyzda degişli nawigasiýa baglanyşygy görkezilýär. Komponent mysalynda gaýtalanýar. Aýlamak we aýratyn bellemek üçin bu ýere başga-da birnäçe mysal nusgasyny goşmagy dowam etdirýäris.

Ikinji sözbaşy

Üçünji sözbaşy

Dördünji sözbaşy

Bäşinji sözbaşy

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

Höwürtge

Scrollspy höwürtgelenen .navs bilen hem işleýär. Höwürtgelenen .navbolsa .active, ene-atasy hem bolar .active. Deňiz paneliniň gapdalyndaky meýdany aýlaň we işjeň synp üýtgemegine tomaşa ediň.

1-nji bent

JavaScript plagininiň görünýän zatlaryň arasynda dogry elementi saýlamaga synanyşýandygyny ýadyňyzdan çykarmaň. Şol bir wagtyň özünde birnäçe görünýän scrollspy nyşanlary käbir meselelere sebäp bolup biler.

1-1-nji bent

1-2-nji bent

2-nji bent

3-nji bent

3-1-nji bent

3-2-nji bent

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

Sanaw topary

Scrollspy .list-groups bilen hem işleýär. Sanaw toparynyň gapdalyndaky meýdany aýlaň we işjeň synp üýtgemegine tomaşa ediň.

1-nji bent 2-nji bent 3-nji bent 4-nji bent

1-nji bent

2-nji bent

3-nji bent

4-nji bent

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

Pleönekeý labyrlar

“Scrollspy” diňe bir bölek bölekleri we sanaw toparlary bilen çäklenmeýär, şonuň <a>üçin häzirki resminamadaky islendik labyr elementleriniň üstünde işlär. Meýdany aýlaň we .activesynpyň üýtgemegine tomaşa ediň.

1-nji bent 2-nji bent 3-nji bent 4-nji bent 5-nji bent

1-nji bent

2-nji bent

3-nji bent

4-nji bent

5-nji bent

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

Görünmeýän elementler

Görünmeýän nyşan elementleri hasaba alynmaz we degişli deňiz elementleri .activesynp almaz. Görünmeýän örtükde başlanan Scrollspy mysallary ähli maksat elementlerini äsgermezlik eder. refreshÖrtük görünýäninden soň synlap boljak elementleri barlamak üçin usuly ulanyň .

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

Ulanylyşy

Maglumat atributlary arkaly

Topbar nawigasiýaňyza skrollspy häsiýetini aňsatlyk bilen goşmak data-bs-spy="scroll"üçin içaly bolmak isleýän elementiňize goşuň (köplenç bu şeýle bolar <body>). Soňra islendik Bootstrap komponentiniň esasy elementiniň synp ýa-da synp ady data-bs-targetbilen atribut goşuň.id.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>

JavaScript arkaly

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

Görnüş

Opsiýalary maglumat atributlary ýa-da JavaScript arkaly geçirip bolýandygy sebäpli, opsiýa adyny data-bs-bolşy ýaly goşup bilersiňiz data-bs-animation="{value}". Opsiýalary maglumat atributlary arkaly geçireniňizde , opsiýanyň adynyň görnüşini “ camelCase ” -den “ kebab-case ” diýip üýtgediň. Mysal üçin, data-bs-custom-class="beautifier"ýerine ulanyň data-bs-customClass="beautifier".

“Bootstrap 5.2.0” -e görä, ähli komponentler JSON setiri hökmünde ýönekeý komponent konfigurasiýasyny saklap bilýän tejribe ätiýaçlandyrylan maglumat atributyny goldaýar. data-bs-configHaçan-da bir element data-bs-config='{"delay":0, "title":123}'we data-bs-title="456"häsiýetler bar bolsa, iň soňky titlebaha bolar 456we aýratyn maglumatlar atributlary berlen bahalary ýok eder data-bs-config. Mundan başga-da, bar bolan maglumatlar atributlary ýaly JSON bahalaryny ýerleşdirmäge ukyply data-bs-delay='{"show":0,"hide":150}'.

Ady	Görnüşi	Bellenen	Düşündiriş
`rootMargin`	setir	`0px 0px -25%`	Kesiş synçysy kökMargin aýlaw ýerini hasaplanda dogry birlikler.
`smoothScroll`	boolean	`false`	Ulanyjy “ScrollSpy” -y synlap bolýan baglanyşyga bassa, süýşürmegi aňsatlaşdyrýar.
`target`	setir, DOM elementi	`null`	Scrollspy pluginini ulanmak üçin elementi kesgitleýär.
`threshold`	massiw	`[0.1, 0.5, 1]`	`IntersectionObserver` aýlaw ýagdaýyny hasaplanyňyzda, dogry giriş.

Könelişen Görnüş

V5.1.3-e çenli , köne we ýerine çalşylýan offset& methodopsiýalary ulanýardyk rootMargin. offsetYza gabat gelýänligi saklamak üçin berlenleri derňemegi dowam etdireris , ýöne bu aýratynlyk v6rootMargin -da aýrylar .

Usullar

Usul	Düşündiriş
`dispose`	Bir elementiň aýlawyny ýok edýär. (DOM elementindäki saklanan maglumatlary aýyrýar)
`getInstance`	DOM elementi bilen baglanyşykly scrollspy mysalyny almak üçin statiki usul.
`getOrCreateInstance`	DOM elementi bilen baglanyşykly scrollspy mysalyny almak ýa-da başlamadyk ýagdaýynda täzesini döretmek üçin statiki usul.
`refresh`	DOM-da elementleri goşanyňyzda ýa-da aýyranyňyzda, täzeleme usulyna jaň etmeli bolarsyňyz.

Ine, täzeleniş usulyny ulanýan bir mysal:

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

Wakalar

Waka	Düşündiriş
`activate.bs.scrollspy`	Bu waka, haçan-da bir labyr scrolllspy tarapyndan işjeňleşdirilse, aýlaw elementine ýanýar.

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