Xiphepherhele xa swiphepherhele

Hi ku tisungulela pfuxeta ku famba-famba ka Bootstrap kumbe ku xaxameta swiphemu swa ntlawa hi ku ya hi xiyimo xa ku rhendzeleka ku kombisa leswaku hi xihi xihlanganisi lexi tirhaka sweswi eka xivono.

Eka tluka leri

Ndlela leyi swi tirhaka ha yona

Scrollspy yi cinca-cinca .activetlilasi eka swiaki swa anchor ( <a>) loko elemente leyi nga na leswi idkongomisiweke hi anchor's hrefyi rhendzeleka yi nghena eka xivono. Scrollspy yi tirhisiwa kahle swin’we na xiphemu xa nav xa Bootstrap kumbe ntlawa wa nxaxamelo , kambe yi ta tlhela yi tirha na swiaki swihi na swihi swa anchor eka tluka ra sweswi. Hi leyi ndlela leyi swi tirhaka ha yona.

Ku sungula, scrollspy yi lava swilo swimbirhi: ku famba-famba, ntlawa wa nxaxamelo, kumbe sete yo olova ya swihlanganisi, ku engetela eka xigwitsirisi lexi nga rhendzelekaka. Xikhomela-ndhawu lexi nga rhendzelekaka xi nga va <body>kumbe xiaki xa ntolovelo lexi nga ni sete heightna overflow-y: scroll.
Eka xigwitsirisi lexi nga rhendzelekaka, engetela data-bs-spy="scroll"naswona data-bs-target="#navId"laha navIdku nga ku hlawuleka idka ku famba-famba loku fambisanaka na kona. Tiyisisa leswaku u tlhela u katsa a tabindex="0"ku tiyisisa ku nghena ka khibhodi.
Loko u ri karhi u famba-famba eka xigwitsirisi xa “spied,” ku .activeengeteriwa tlilasi ni ku susiwa eka swihlanganisi swa anchor endzeni ka ku famba-famba loku fambisanaka na kona. Swihlanganisi swi fanele ku va na idswikongomelo leswi nga lulamisiwaka, handle ka sweswo swa honisiwa. Xikombiso, a yi <a href="#home">home</a>fanele ku fambisana na nchumu wo karhi eka DOM ku fana na<div id="home"></div>
Swiaki leswi kongomisiweke leswi nga vonakiki swi ta honisiwa. Vona xiyenge xa Swiaki leswi nga vonakiki laha hansi.

Swikombiso

Skrolela ndhawu leyi nga ehansi ka navbar ivi u hlalela ku cinca ka tlilasi leyi tirhaka. Pfula menyu leyi nga ehansi ivi u hlalela swilo leswi nga ehansi swi kombisiwa na swona.

Nhlokomhaka yo sungula

Lexi i swin’wana swa swikhomela-ndhawu swa tluka ra scrollspy. Xiya leswaku loko u ri karhi u famba-famba ehansi eka tluka, ku kombisiwa xihlanganisi lexi faneleke xo famba-famba. Swi phindha-phindhiwa eka xikombiso hinkwaxo xa xiphemu. Hi tshama hi ri karhi hi engetela xikombiso xin’wana xa kopi laha ku kandziyisa ku rhendzeleka ni ku kandziyisa.

Nhlokomhaka ya vumbirhi

Nhlokomhaka ya vunharhu

Nhlokomhaka ya vumune

Nhlokomhaka ya vuntlhanu

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

Nested nav

Scrollspy yi tlhela yi tirha na nested .navs. Loko nested .navyi ri .active, vatswari va yona na vona va ta va .active. Skrolela ndhawu leyi nga ekusuhi na navbar ivi u hlalela ku cinca ka tlilasi leyi tirhaka.

Nchumu wa 1

Tsundzuka leswaku xiengetelo xa JavaScript xi ringeta ku hlawula xiaki lexi faneleke exikarhi ka hinkwaswo leswi nga ha vonakaka. Swikongomiso swo tala leswi vonakaka swa scrollspy hi nkarhi wun’we swi nga ha vanga timhaka tin’wana.

Nchumu wa 1-1

Nchumu wa 1-2

Nchumu wa 2

Nchumu wa 3

Nchumu wa 3-1

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

Nxaxamelo wa ntlawa

Scrollspy yi tlhela yi tirha na .list-groups. Skrolela ndhawu leyi nga ekusuhi ni ntlawa wa nxaxamelo ivi u hlalela ku cinca ka tlilasi leyi tirhaka.

Nchumu wa 1 Nchumu wa 2 Nchumu wa 3 Nchumu wa 4

Nchumu wa 1

Nchumu wa 2

Nchumu wa 3

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

Swikhomela-ndhawu swo olova

Scrollspy a yi pimiwi eka swiphemu swa nav na mintlawa ya nxaxamelo, hikwalaho yi ta tirha eka <a>swiaki swihi na swihi swa anchor eka tsalwa ra sweswi. Skrolela ndhawu yoleyo ivi u hlalela ku .activecinca ka tlilasi.

Nchumu wa 1 Nchumu wa 2 Nchumu wa 3 Nchumu wa 4 Nchumu wa 5

Nchumu wa 1

Nchumu wa 2

Nchumu wa 3

Nchumu wa 4

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

Swiaki leswi nga vonakiki

Swiaki leswi kongomisiweke leswi nga vonakiki swi ta honisiwa naswona swilo swa swona swa nav leswi fambelanaka a swi nge amukeli .activetlilasi. Swikombiso swa Scrollspy leswi sunguriweke eka xifunengeto lexi nga vonakiki swi ta honisa swiaki hinkwaswo leswi kongomisiweke. Tirhisa refreshndlela leyi ku kambela swiaki leswi voniwaka loko xifunengeto xi vonaka.

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

Matirhiselo

Hi ku tirhisa swihlawulekisi swa data

Ku engetela hi ku olova mahanyelo ya scrollspy eka ku famba-famba ka wena ka topbar, engetela data-bs-spy="scroll"eka elemente leyi u lavaka ku hlota eka yona (hi ntolovelo leswi swi ta va swi ri <body>). Kutani engetela data-bs-targetxihlawulekisi lexi nga ni idvito ra kumbe ra tlilasi ya xiaki xa mutswari xa xiphemu xihi na xihi .navxa Bootstrap.

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

Hi ku tirhisa JavaScript

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

Swihlawulekisi

Tanihi leswi swihlawulekisi swi nga hundziseriwaka hi ku tirhisa swihlawulekisi swa data kumbe JavaScript, u nga engetela vito ra xihlawulekisi eka data-bs-, tanihi le ka data-bs-animation="{value}". Tiyisisa leswaku u cinca muxaka wa xiyimo xa vito ra xihlawulekisi ku suka eka “ camelCase ” ku ya eka “ kebab-case ” loko u hundzisa swihlawulekisi hi ku tirhisa swihlawulekisi swa data. Hi xikombiso, tirhisa data-bs-custom-class="beautifier"ematshan’weni ya data-bs-customClass="beautifier".

Ku sukela eka Bootstrap 5.2.0, swiphemu hinkwaswo swi seketela xihlawulekisi xa datha leyi hlayisiweke ya xikambelodata-bs-config lexi nga vekaka vukorhokeri byo olova bya xiphemu tanihi ntambhu ya JSON. Loko elemente yi ri data-bs-config='{"delay":0, "title":123}'na na data-bs-title="456"swihlawulekisi, titlentikelo wo hetelela wu ta va 456naswona swihlawulekisi swa datha leswi hambaneke swi ta tlula mimpimo leyi nyikiweke eka data-bs-config. Ku engetela kwalaho, swihlawulekisi swa datha leswi nga kona swi kota ku veka mimpimo ya JSON ku fana na data-bs-delay='{"show":0,"hide":150}'.

Vito	Muxaka	Ku tlula	Nhlamuselo
`rootMargin`	ntambu	`0px 0px -25%`	Intersection Observer rootMargin tiyuniti leti tirhaka, loko u hlayela xiyimo xa ku rhendzeleka.
`smoothScroll`	xitsonga xitsonga	`false`	Swi endla leswaku ku famba-famba loku rhetaka loko mutirhisi a tikhoma eka xihlanganisi lexi kombetelaka eka swilo leswi voniwaka swa ScrollSpy.
`target`	ntambhu, xiphemu xa DOM	`null`	Ku hlamusela elemente yo tirhisa Scrollspy plugin.
`threshold`	array ya xirhendzevutani	`[0.1, 0.5, 1]`	`IntersectionObserver` threshold valid input, loko ku hlayiwa xiyimo xa scroll.

Swihlawulekisi leswi nga tirhisiwiki

Ku fikela eka v5.1.3 a hi tirhisa offset& methodoptions, leti sweswi ti nga ha tirhisiwiki naswona ti siviwa hi rootMargin. Ku hlayisa ku fambisana ka le ndzhaku, hi ta ya emahlweni hi parse a given offsetto rootMargin, kambe xivumbeko lexi xi ta susiwa eka v6 .

Maendlelo

Ndlela	Nhlamuselo
`dispose`	Ku herisa scrollspy ya elemente. (Ku susa data leyi hlayisiweke eka elemente ya DOM)
`getInstance`	Ndlela ya static yo kuma xikombiso xa scrollspy lexi fambelanaka na elemente ya DOM.
`getOrCreateInstance`	Ndlela ya static ku kuma xikombiso xa scrollspy lexi fambelanaka na elemente ya DOM, kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga.
`refresh`	Loko u engetela kumbe ku susa swiaki eka DOM, u ta lava ku vitana ndlela yo pfuxeta.

Hi lexi xikombiso lexi tirhisaka ndlela yo pfuxeta:

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

Swiendlakalo

Nkhuvo	Nhlamuselo
`activate.bs.scrollspy`	Xiendlakalo lexi xi pfurha eka elemente ya scroll nkarhi wun’wana na wun’wana loko anchor yi tirhisiwa hi scrollspy.

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