Scrollspy

Si toos ah u cusboonaysii Bootstrap navigation ama tax qaybaha kooxda ee ku salaysan booska rogid si aad u muujiso xidhiidhka hadda firfircoon ee muuqaalka.

Boggan

Sida ay u shaqeyso

Scrollspy waxay ku rogtaa fasalka curiyayaasha .active( ) marka curiyaha leh tixraaca barroosinka la rogo aragtida. Scrollspy waxaa sida ugu fiican loo isticmaalaa iyada oo lala kaashanayo qaybta Bootstrap nav ama kooxda liiska , laakiin sidoo kale waxay la shaqayn doontaa curiyayaasha barroosinka ee bogga hadda jira. Waa kan sida ay u shaqeyso<a>idhref

Si loo bilaabo, scrollspy waxay u baahan tahay laba shay: navigation, koox liis ah, ama xidhidhiye fudud, iyo weel la duubi karo. Weelka la rogrogmi karo waxa uu noqon karaa <body>curiye ama qalab gaar ah oo leh go'an heightiyo overflow-y: scroll.
Weelka la rogrogmi karo, ku dar data-bs-spy="scroll"oo data-bs-target="#navId"meeday navIdta u gaarka idah ee hagidda la xidhiidha. Hubi inaad sidoo kale ku darto a tabindex="0"si loo hubiyo gelitaanka kiiboodhka.
Markaad rogrogto weelka "basaasay", .activefasal ayaa lagu daraa oo laga saarayaa xiriiriyeyaasha barroosinka ee ku dhex jira marinka la xiriira. Xiriirinta waa inay lahaadaan idbartilmaameedyo la xallin karo, haddii kale waa la iska indhatiray. Tusaale ahaan, <a href="#home">home</a>waa inuu u dhigmaa wax ku jira DOM sida<div id="home"></div>
Walxaha bartilmaameedka ah ee aan muuqan waa la iska indhatiray. Hoos ka eeg qaybta canaasiirta aan muuqan

Tusaalooyinka

U rog aagga navbar ka hooseeya oo daawo isbeddelka fasalka firfircoon. Fur liiska hoos u dhaca oo daawo shayada hoos u dhaca oo la iftiimiyay sidoo kale.

Ciwaanka ugu horeeya

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Ciwaanka labaad

Ciwaanka saddexaad

Ciwaanka afraad

Ciwaanka shanaad

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

Nav buul leh

Scrollspy sidoo kale waxay la shaqeysaa buulka .navs. Haddii buul ku .navyaal .active, waalidkeed sidoo kale waxay ahaan doonaan .active. U rog aagga ku xiga navbar oo daawo isbeddelka fasalka firfircoon.

Shayga 1

Maskaxda ku hay in plugin-ka JavaScript uu isku dayo inuu ka soo xusho walxaha saxda ah dhammaan kuwa la arki karo. Bartilmaameedyo badan oo duuban oo muuqda isla waqti isku mid ah ayaa laga yaabaa inay keenaan arrimo qaarkood.

Shayga 1-1

Shayga 1-2

Shayga 2

Shayga 3

Shayga 3-1

Shayga 3-2

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

Liiska kooxda

Scrollspy sidoo kale waxay la shaqeysaa .list-groups. U rog aagga ku xiga kooxda liiska oo daawo isbeddelka fasalka firfircoon.

Shayga 1 Shayga 2 Shayga 3 Shayga 4

Shayga 1

Shayga 2

Shayga 3

Shayga 4

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

barroosinno fudud

Scrollspy kuma koobna qaybaha nav iyo kooxaha liiska, sidaas darteed waxay ka shaqayn doontaa wax kasta <a>oo walxaha barroosinka ah ee dukumeentiga hadda jira. U rog aagga oo fiirso .activeisbeddelka fasalka.

Shayga 1 Shayga 2 Shayga 3 Shayga 4 Shayga 5

Shayga 1

Shayga 2

Shayga 3

Shayga 4

Shayga 5

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

Curiyayaasha aan muuqan

Walxaha bartilmaameedka ah ee aan muuqan waa la iska indhatiray oo alaabtooda nav ee u dhiganta ma heli doonaan .activefasal. Tusaalooyinka Scrollspy ee lagu bilaabay duub aan muuqan waxay iska indha tirayaan dhammaan walxaha la beegsanayo. Isticmaal refreshhabka si aad u hubiso walxaha la arki karo marka duubku uu muuqdo.

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

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Si aad si fudud ugu darto habdhaqanka scrollspy to your topbar navigation, data-bs-spy="scroll"ku dar walxaha aad rabto in aad basaasto (inta badan tani waxay noqonaysaa <body>). Ka dib ku dar data-bs-targetsifada idmagaca ama fasalka ee xubinta waalidka ee qayb kasta oo Bootstrap .navah.

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Iyadoo loo marayo JavaScript

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

Ikhtiyaarada

Sida xulashooyinka loogu gudbi karo sifooyinka xogta ama JavaScript, waxaad ku dari kartaa magaca ikhtiyaarka ah data-bs-, sida ku jira data-bs-animation="{value}". Hubi inaad ka beddesho nooca kiis ee magaca ikhtiyaarka " camelCase " una beddelo " kebab-case " markaad ikhtiyaarka ku gudbinayso sifooyinka xogta. Tusaale ahaan, isticmaal data-bs-custom-class="beautifier"bedelkii data-bs-customClass="beautifier".

Marka la eego Bootstrap 5.2.0, dhammaan qaybaha waxay taageeraan sifada xogta kaydsan ee tijaabadadata-bs-config ah taas oo u dejin karta qaabaynta qaybaha fudud sida xadhig JSON ah. Marka curiye leeyahay data-bs-config='{"delay":0, "title":123}'iyo data-bs-title="456"sifooyin, titleqiimaha kama dambaysta ahi waxa uu ahaan doonaa 456sifada xogta goonida ahina waxa ay meesha ka saari doontaa qiyamka lagu bixiyo data-bs-config. Intaa waxaa dheer, sifada xogta hadda jirta waxay awood u leedahay inay ku noolaato qiyamka JSON sida data-bs-delay='{"show":0,"hide":150}'.

Magaca	Nooca	Asal ahaan	Sharaxaada
`rootMargin`	xadhig	`0px 0px -25%`	Isgoysyada Observer rootMargin cutubyo ansax ah, marka la xisaabinayo booska rogrog.
`smoothScroll`	booliyan	`false`	Waxay sahlaysa duubitaan sahlan marka isticmaaluhu uu gujiyo isku xirka tixraacaya ScrollSpy observables.
`target`	xadhig, element DOM	`null`	Wuxuu qeexayaa curiyaha lagu dabaqi karo Scrollpy plugin.
`threshold`	diyaarin	`[0.1, 0.5, 1]`	`IntersectionObserver` galinta bilowga ansax ah, marka la xisaabinayo booska rogrogid.

Ikhtiyaarada la joojiyay

Ilaa v5.1.3 waxaan isticmaaleynay offset& methodxulashooyinka, kuwaas oo hadda la joojiyay oo lagu beddelay rootMargin. Si aan gadaal ugu soconno, waanu sii wadi doonaa kala saarista waxa la siiyay offset, rootMarginlaakiin sifadan waxa laga saarayaa v6 .

Hababka

Habka	Sharaxaada
`dispose`	Wuxuu baabi'iyaa rog-rogadka curiyaha. (Waxay tirtirtaa xogta kaydsan ee cunta DOM)
`getInstance`	Habka taagan si aad u hesho tusaalaha duubista ee la xidhiidha curiyaha DOM.
`getOrCreateInstance`	Habka taagan si aad u hesho tusaalaha duubista ee la xidhiidha curiyaha DOM, ama in mid cusub loo sameeyo haddii aan la bilaabin.
`refresh`	Markaad ku darto ama ka saarayso walxaha ku jira DOM, waxaad u baahan doontaa inaad wacdo habka dib u cusboonaysiinta.

Waa kuwan tusaale isticmaalaya habka dib u cusboonaysiinta:

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

Dhacdooyinka

Dhacdo	Sharaxaada
`activate.bs.scrollspy`	Dhacdadani waxay dab ku shid cunsuga duubista mar kasta oo barroosinku uu hawlgeliyo buug-rogid.

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