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 sahypada

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

Üçünji sözbaşy

Dördünji sözbaşy

Bäşinji sözbaşy

<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

1-1-nji bent

1-2-nji bent

2-nji bent

3-nji bent

3-1-nji bent

3-2-nji bent

<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 2-nji bent 3-nji bent 4-nji bent

1-nji bent

2-nji bent

3-nji bent

4-nji bent

<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çylyk etmek 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. `auto`Aý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 scrolllspy 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...
})

Scrollspy

Bu nähili işleýär

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

Deňiz panelinde mysal

Ilki sözbaşy

Ikinji sözbaşy

Üçünji sözbaşy

Dördünji sözbaşy

Bäşinji sözbaşy

Içindäki deňiz bilen mysal

1-nji bent

1-1-nji bent

1-2-nji bent

2-nji bent

3-nji bent

3-1-nji bent

3-2-nji bent

Sanaw topary bilen mysal

1-nji bent

2-nji bent

3-nji bent

4-nji bent

Ulanylyşy

Maglumat atributlary arkaly

JavaScript arkaly

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

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

Usullar

täzele

taşlaň

GetInstance

getOrCreateInstance

Görnüş

Wakalar