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 na swilaveko swi nga ri swingani leswaku yi tirha kahle:

Yi fanele ku tirhisiwa eka xiphemu xa nav xa Bootstrap kumbe ntlawa wa nxaxamelo .
Scrollspy yi lava position: relative;eka elemente leyi u yi hlotaka, hi ntolovelo <body>.
Tianchor ( <a>) ta laveka naswona ti fanele ku kombetela eka elemente leyi nga na sweswo id.

Loko yi tirhisiwile hi ndlela leyi humelelaka, ntlawa wa wena wa nav kumbe wa nxaxamelo wu ta pfuxeta hi ku landza sweswo, wu rhurhela .activetlilasi ku suka eka nchumu wun’wana ku ya eka wun’wana hi ku ya hi swikongomelo swa wona leswi fambisanaka na swona.

Swikhomela-ndhawu leswi nga rhendzelekaka ni ku nghena ka khibhodi

Loko u endla xigwitsirisi lexi nga rhendzelekaka (handle ka <body>), tiyiseka leswaku u ni heightsete naswona u yi overflow-y: scroll;cheriwa eka xona—etlhelo ka a tabindex="0"ku tiyiseka leswaku u nghena hi khibhodi.

Skrolela ndhawu leyi nga ehansi ka navbar ivi u hlalela ku cinca ka tlilasi leyi tirhaka. Swilo leswi nga ehansi swi ta 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 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>

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

Nchumu wa 1-1

Nchumu wa 1-2

Nchumu wa 2

Nchumu wa 3

Nchumu wa 3-1

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

Xikombiso xa list-group

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

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 hi ID kumbe tlilasi ya elemente ya mutswari ya xiphemu xihi na xihi .navxa 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>

Hi ku tirhisa JavaScript

Endzhaku ko engetela position: relative;eka CSS ya wena, vitana scrollspy hi ku tirhisa JavaScript:

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

Swikongomiso swa ID leswi nga lulamisiwaka swa laveka

Swihlanganisi swa Navbar swi fanele ku va na swikongomelo swa id leswi nga lulamisiwaka. 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 honisiwile

Swiaki leswi kongomisiweke leswi nga vonakiki swi ta honisiwa naswona swilo swa swona swa nav leswi fambelanaka a swi nge pfuki swi kombisiwile.

Maendlelo

ku phyuphyisa

Loko u tirhisa scrollspy hi ku fambisana na ku engetela kumbe ku susa swiaki eka DOM, u ta lava ku vitana ndlela yo pfuxeta ku fana na sweswo:

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

lahla

Ku herisa scrollspy ya elemente. (Ku susa data leyi hlayisiweke eka elemente ya DOM)

getXikombiso

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa scrollspy lexi fambelanaka na elemente ya DOM

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

kumaKumbeEndlaXikombiso

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa scrollspy lexi fambelanaka na elemente ya DOM, kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga

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

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-bs-, tanihi le ka data-bs-offset="".

Vito	Muxaka	Ku tlula	Nhlamuselo
`offset`	nomboro	`10`	Tipikseli to offset kusuka ehenhla loko u hlayela xiyimo xa scroll.
`method`	ntambu	`auto`	Finds which section the spied element is in. `auto`yi ta hlawula ndlela leyinene yo kuma tikhodixini ta ku rhendzeleka. `offset`yi ta tirhisa `Element.getBoundingClientRect()`ndlela yo kuma tikhodixini ta ku rhendzeleka. `position`yi ta tirhisa swihlawulekisi swa `HTMLElement.offsetTop`na `HTMLElement.offsetLeft`ku kuma tikhodixini ta ku rhendzeleka.
`target`	ntambhu ya xirhendzevutani \| jNchumu wa xivutiso \| Xiphemu xa DOM		Ku hlamusela elemente yo tirhisa Scrollspy plugin.

Swiendlakalo

Muxaka wa xiendlakalo	Nhlamuselo
`activate.bs.scrollspy`	Xiendlakalo lexi xi pfurha eka elemente ya scroll nkarhi wun’wana na wun’wana loko nchumu lowuntshwa wu sungula ku tirhisiwa hi scrollspy.

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

Xiphepherhele xa swiphepherhele

Ndlela leyi swi tirhaka ha yona

Swikhomela-ndhawu leswi nga rhendzelekaka ni ku nghena ka khibhodi

Xikombiso eka navbar

Nhlokomhaka yo sungula

Nhlokomhaka ya vumbirhi

Nhlokomhaka ya vunharhu

Nhlokomhaka ya vumune

Nhlokomhaka ya vuntlhanu

Xikombiso xa nested nav

Nchumu wa 1

Nchumu wa 1-1

Nchumu wa 1-2

Nchumu wa 2

Nchumu wa 3

Nchumu wa 3-1

Nchumu wa 3-2

Xikombiso xa list-group

Nchumu wa 1

Nchumu wa 2

Nchumu wa 3

Nchumu wa 4

Matirhiselo

Hi ku tirhisa swihlawulekisi swa data

Hi ku tirhisa JavaScript

Swikongomiso swa ID leswi nga lulamisiwaka swa laveka

Swiaki leswi kongomisiweke leswi nga vonakiki swi honisiwile

Maendlelo

ku phyuphyisa

lahla

getXikombiso

kumaKumbeEndlaXikombiso

Swihlawulekisi

Swiendlakalo