in English

Scrollspy

Navîgasyona Bootstrap-ê bixweber nûve bikin an jî pêkhateyên komê li gorî pozîsyona gerokê navnîş bikin da ku destnîşan bikin ka kîjan girêdan niha di dîmenderê de çalak e.

Li ser vê rûpelê

Çawa dixebite

Scrollspy çend hewcedariyên xwe hene ku bi rêkûpêk bixebitin:

Pêdivî ye ku ew li ser pêkhateyek navokê ya Bootstrap an koma navnîşê were bikar anîn .
Scrollspy position: relative;li ser hêmana ku hûn li ser sîxuriyê dikin, bi gelemperî pêdivî ye <body>.
Anker ( <a>) hewce ne û divê hêmanek pê re nîşan bidin id.

Dema ku bi serfirazî were sepandin, koma nav an navnîşa we dê li gorî wê nûve bike, li gorî .activearmancên wan ên têkildar polê ji yek babetekê berbi ya din veguhezîne.

Konteynirên scrollable û gihîştina klavyeyê

Ger hûn konteynirek gerok çêdikin (ji xeynî <body>), pê ewle bin ku pêvek hebe heightû pê ve overflow-y: scroll;were sepandin - li kêleka a tabindex="0"da ku gihîştina klavyeyê misoger bike.

Li qada li jêr navbarê bigerin û li guhertina çîna çalak temaşe bikin. Dê hêmanên dakêşanê jî werin ronî kirin.

Sernavê yekem

Ev ji bo rûpela scrollspy hin naverokek cîhgir e. Bala xwe bidinê ku gava hûn rûpelê dakêşin, zencîreya navîgasyonê ya guncan tê ronî kirin. Ew li seranserê nimûneya pêkhatê tê dubare kirin. Em li vir kopiyek mînakek din lê zêde dikin da ku balê bikişîne ser gerok û ronîkirinê.

Sernavê duyemîn

Sernavê sêyemîn

Sernavê çaremîn

Sernavê pêncemîn

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

Mînak bi nav hêlîn

Scrollspy jî bi .navs hêlînên dixebite. Heger hêlînek .navbe .activedê û bavê wî jî bibin .active. Li qada li kêleka navbarê bigerin û li guhertina çîna çalak temaşe bikin.

Babetê 1

Babetê 1-1

Babetê 1-2

Babetê 2

Babetê 3

Babetê 3-1

Babetê 3-2

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

Mînak bi lîsteya-komê

Scrollspy jî bi .list-groups dixebite. Li qada li kêleka koma navnîşê bigerin û li guhertina çîna çalak temaşe bikin.

Babetê 1 Babetê 2 Babetê 3 Babetê 4

Babetê 1

Babetê 2

Babetê 3

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

Bikaranîna

Bi taybetmendiyên daneyê

Ji bo ku bi hêsanî behreya scrollspy li navîgasyona xweya jorîn zêde data-bs-spy="scroll"bikin, li hêmana ku hûn dixwazin bişopînin lê zêde bikin (bi gelemperî ev dê bibe <body>). Dûv re data-bs-targettaybetmendiyê bi ID an pola hêmana dêûbavê ya her .navpêkhateyek Bootstrap ve zêde bikin.

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>

Bi JavaScript

Piştî ku position: relative;CSS-ya xwe zêde kirin, bi JavaScript-ê re bang bikin scrollspy:

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

Armancên nasnameyê yên çareserkirî hewce ne

Pêdivî ye ku girêdanên navbar xwedî armancên nasnameyê yên çareserkirî bin. Mînakî, <a href="#home">home</a>pêdivî ye ku bi tiştek di DOM-ê de mîna <div id="home"></div>.

Hêmanên armancê yên ne-dîtbar paşguh kirin

Hêmanên mebest ên ku ne diyar in dê werin paşguh kirin û tiştên navika wan ên têkildar dê çu carî neyên ronî kirin.

Methods

hênikkirin

Dema ku scrollspy digel lê zêdekirin an rakirina hêmanan ji DOM-ê re bikar bînin, hûn ê hewce bikin ku rêbaza nûvekirinê ya weha bang bikin:

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

avêtin

Scrollspy ya hêmanek hilweşîne. (Daneyên hilanîn ên li ser hêmana DOM-ê radike)

getInstance

Rêbaza statîk ku dihêle hûn mînaka scrollspy-ê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin

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

getOrCreateInstance

Rêbaza statîkî ya ku dihêle hûn mînaka scrollspy-ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin, an heke ew nehatibe destpêkirin yek nû biafirînin.

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-bs-, wekî di data-bs-offset="".

Nav	Awa	Destçûnî	Terîf
`offset`	jimare	`10`	Pixelên ku ji jor ve têne veqetandin dema ku pozîsyona gerokê hesab dikin.
`method`	ben	`auto`	Dibîne ku hêmana sîxur di kîjan beşê de ye. `auto`Ji bo bidestxistina koordînatên gerîdeyê dê rêbaza çêtirîn hilbijêrin. `offset`dê `Element.getBoundingClientRect()`rêbazê bikar bîne da ku hevrêzên gerokê bigire. `position`dê taybetmendî `HTMLElement.offsetTop`û `HTMLElement.offsetLeft`taybetmendiyan bikar bîne da ku hevrêzên gerokê bigire.
`target`	string \| jQuery object \| hêmana DOM		Hêmanek diyar dike ku pêveka Scrollspy bicîh bîne.

Events

Cureyê bûyerê	Terîf
`activate.bs.scrollspy`	Dema ku babetek nû ji hêla scrollspy ve tê çalak kirin ev bûyer li ser hêmana gerokê dişewite.

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

Scrollspy

Çawa dixebite

Konteynirên scrollable û gihîştina klavyeyê

Mînak di navbarê de

Sernavê yekem

Sernavê duyemîn

Sernavê sêyemîn

Sernavê çaremîn

Sernavê pêncemîn

Mînak bi nav hêlîn

Babetê 1

Babetê 1-1

Babetê 1-2

Babetê 2

Babetê 3

Babetê 3-1

Babetê 3-2

Mînak bi lîsteya-komê

Babetê 1

Babetê 2

Babetê 3

Babetê 4

Bikaranîna

Bi taybetmendiyên daneyê

Bi JavaScript

Armancên nasnameyê yên çareserkirî hewce ne

Hêmanên armancê yên ne-dîtbar paşguh kirin

Methods

hênikkirin

avêtin

getInstance

getOrCreateInstance

Vebijêrk

Events