Scrollspy

Sabunta kewayawa ta Bootstrap ta atomatik ko jera abubuwan rukuni bisa ga matsayin gungura don nuna wace hanyar haɗin ke aiki a halin yanzu a tashar kallo.

A wannan shafi

Yadda yake aiki

Scrollspy yana da ƴan buƙatu don yin aiki da kyau:

Dole ne a yi amfani da shi akan bangaren Bootstrap nav ko jerin rukuni .
Scrollspy yana buƙatar abun position: relative;da kuke leƙo asirin ƙasa, yawanci <body>.
Ana buƙatar anka ( <a>) kuma dole ne su nuna wani kashi mai wannan id.

Lokacin da aka yi nasarar aiwatarwa, nav ɗinku ko ƙungiyar jeri za su ɗaukaka daidai da haka, suna matsar da .activeajin daga abu ɗaya zuwa na gaba dangane da makasudin haɗin gwiwa.

Kwantena masu gungurawa da shiga madannai

Idan kana yin akwati mai gungurawa (banda na <body>), tabbatar da samun heightsaiti kuma overflow-y: scroll;a yi amfani da shi — tare da tabindex="0"tabbatar da samun damar madannai.

Gungura wurin da ke ƙasa da maɓallin kewayawa kuma duba canjin aji mai aiki. Za a kuma haskaka abubuwan da aka zazzage su ma.

Tafarki na farko

Wannan wasu abun ciki ne mai riƙe da wuri don shafin scrollspy. Lura cewa yayin da kake gungura ƙasa shafin, ana haskaka hanyar kewayawa da ta dace. Ana maimaita shi a cikin misalin bangaren. Muna ci gaba da ƙara wasu kwafin misali anan don jaddada gungurawa da haskakawa.

Take na biyu

Take na uku

Tafi na hudu

Tafi na biyar

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

Misali tare da nav

Scrollspy kuma yana aiki tare da nsted .navs. Idan gida .navne .active, iyayensa ma za su kasance .active. Gungura wurin kusa da mashigin kewayawa kuma duba canjin aji mai aiki.

Abu na 1

Abu na 1-1

Abu na 1-2

Abu na 2

Abu na 3

Abu na 3-1

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

Misali tare da rukuni-rukuni

Scrollspy kuma yana aiki tare da .list-groups. Gungura yankin kusa da rukunin jerin kuma duba canjin aji mai aiki.

Abu na 1 Abu na 2 Abu na 3 Abu na 4

Abu na 1

Abu na 2

Abu na 3

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

Amfani

Ta hanyar bayanan halayen

Don ƙara halayyar scrollspy cikin sauƙi zuwa kewayawar saman sandar ku, ƙara data-bs-spy="scroll"zuwa ɓangaren da kuke son yin leken asiri a kai (mafi yawanci wannan shine <body>). Sannan ƙara data-bs-targetsifa tare da ID ko aji na ɓangaren mahaifa na kowane .navɓangaren Bootstrap.

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>

Ta hanyar JavaScript

Bayan ƙara position: relative;a cikin CSS ɗin ku, kira gungurawa ta hanyar JavaScript:

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

Ana buƙatar makasudin ID mai warwarewa

Dole ne hanyoyin haɗin Navbar su kasance da maƙasudin id masu warwarewa. Misali, <a href="#home">home</a>dole ne ya dace da wani abu a cikin DOM kamar <div id="home"></div>.

Abubuwan da ba a ganuwa sun yi watsi da su

Abubuwan da ba a ganuwa ba za a yi watsi da su kuma ba za a taɓa haskaka abubuwan da suka dace ba.

Hanyoyin

wartsake

Lokacin amfani da scrollspy tare da ƙara ko cire abubuwa daga DOM, kuna buƙatar kiran hanyar wartsakewa kamar haka:

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

jefar

Yana lalata rubutun gungurawa. (Yana cire bayanan da aka adana akan ɓangaren DOM)

samun Misali

Hanyar a tsaye wacce ke ba ku damar samun misalan gungurawa mai alaƙa da ɓangaren DOM

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

samunOrCreateInstance

Hanyar da ba ta dace ba wacce ke ba ku damar samun misalin gungurawa mai alaƙa da wani ɓangaren DOM, ko ƙirƙirar sabo idan ba a fara shi ba.

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-bs-, kamar a cikin data-bs-offset="".

Suna	Nau'in	Default	Bayani
`offset`	lamba	`10`	Pixels don kashewa daga sama yayin ƙididdige matsayi na gungurawa.
`method`	kirtani	`auto`	Nemo wanne yanki ne ɓangaren leƙen asiri ke ciki. `auto`zai zaɓi hanya mafi kyau don samun haɗin gwiwar gungurawa. `offset`zai yi amfani da `Element.getBoundingClientRect()`hanyar don samun haɗin gwiwar gungurawa. `position`zai yi amfani `HTMLElement.offsetTop`da `HTMLElement.offsetLeft`kaddarorin don samun haɗin gwiwar gungurawa.
`target`	zaren \| jQuery abu \| DOM element		Yana ƙayyade kashi don amfani da Scrollspy plugin.

Abubuwan da suka faru

Nau'in taron	Bayani
`activate.bs.scrollspy`	Wannan taron yana ƙone ɓangaren gungurawa a duk lokacin da sabon abu ya kunna ta hanyar gungurawa.

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

Scrollspy

Yadda yake aiki

Kwantena masu gungurawa da shiga madannai

Misali a cikin navbar

Tafarki na farko

Take na biyu

Take na uku

Tafi na hudu

Tafi na biyar

Misali tare da nav

Abu na 1

Abu na 1-1

Abu na 1-2

Abu na 2

Abu na 3

Abu na 3-1

Abu na 3-2

Misali tare da rukuni-rukuni

Abu na 1

Abu na 2

Abu na 3

Abu na 4

Amfani

Ta hanyar bayanan halayen

Ta hanyar JavaScript

Ana buƙatar makasudin ID mai warwarewa

Abubuwan da ba a ganuwa sun yi watsi da su

Hanyoyin

wartsake

jefar

samun Misali

samunOrCreateInstance

Zabuka

Abubuwan da suka faru