Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
in English

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 nähili işleýär

Scrollspy-nyň dogry işlemegi üçin birnäçe talaplar bar:

  • “Bootstrap nav” komponentinde ýa-da sanaw toparynda ulanylmaly .
  • Scrollspy position: relative;içalyçylyk edýän elementiňize, adatça <body>.
  • Gämi ( <a>) talap edilýär we şonuň bilen bir elementi görkezmeli id.

Üstünlikli durmuşa geçirilende, deňiz ýa-da sanaw toparyňyz .activedegişli maksatlara esaslanyp synpy bir elementden beýlekisine geçirer.

Aýlanyp bolýan gaplar we klawiatura girişi

Aýlanyp bolýan konteýner ýasaýan bolsaňyz (klawiaturadan başga ), klawiaturanyň elýeterliligini üpjün etmek üçin bir gapdalynda bir toplumyň <body>bardygyny we ulanyljakdygyny unutmaň .heightoverflow-y: scroll;tabindex="0"

Deňiz panelinde mysal

Deňiz paneliniň aşagyndaky meýdany aýlaň we işjeň synp üýtgemegine tomaşa ediň. Açylýan zatlar hem görkeziler.

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

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.

Üçünji 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.

Dördünji 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.

Bäşinji 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.

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

Içindäki deňiz bilen mysal

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

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.

1-1-nji bent

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.

1-2-nji bent

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.

2-nji bent

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.

3-nji bent

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.

3-1-nji bent

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.

3-2-nji bent

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.

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

Sanaw topary bilen mysal

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

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.

2-nji bent

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.

3-nji bent

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.

4-nji bent

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.

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

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ň data-bs-targetesasy elementiniň ID ýa-da synpy bilen atribut goşuň..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>

JavaScript arkaly

CSS-ä goşanyňyzdan soň position: relative;, JavaScript arkaly scrollspy jaň ediň:

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

Çözüp bolýan ID nyşanlary talap edilýär

Navbar baglanyşyklarynda çözülip bilinýän ID nyşanlary bolmaly. Mysal üçin, <a href="#home">home</a>DOM-daky ýaly bir zada laýyk bolmaly <div id="home"></div>.

Görünmeýän maksat elementleri hasaba alynmady

Görünmeýän nyşan elementleri hasaba alynmaz we degişli deňiz elementleri hiç haçan tapawutlandyrylmaz.

Usullar

täzele

DOM-dan elementleri goşmak ýa-da aýyrmak bilen bilelikde scrollspy ulananyňyzda, täzeleniş usulyna şeýle jaň etmeli bolarsyňyz:

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

taşlaň

Bir elementiň aýlawyny ýok edýär. (DOM elementindäki saklanan maglumatlary aýyrýar)

GetInstance

DOM elementi bilen baglanyşykly scrollspy mysalyny almaga mümkinçilik berýän statiki usul

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

DOM elementi bilen baglanyşykly scrollspy mysalyny almaga ýa-da başlamadyk ýagdaýynda täzesini döretmäge mümkinçilik berýän statiki usul.

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bs-bolşy ýaly goşuň data-bs-offset="".

Ady Görnüşi Bellenen Düşündiriş
offset sany 10 Aýlanyş ýagdaýyny hasaplanyňyzda ýokardan ýapyljak pikseller.
method setir auto Içaly elementiň haýsy bölümdedigini tapýar. autoAýlamak koordinatlaryny almak üçin iň oňat usuly saýlar. aýlaw koordinatlaryny almak offsetüçin usuly ulanar . aýlaw koordinatlaryny almak üçin häsiýetleri we häsiýetleri ulanar .Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft
target setir | jQuery obýekti | DOM elementi Scrollspy pluginini ulanmak üçin elementi kesgitleýär.

Wakalar

Çäräniň görnüşi Düşündiriş
activate.bs.scrollspy Bu waka, haçan-da täze bir zat scrollspy tarapyndan işjeňleşdirilse, aýlaw elementine ýanýar.
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})