Scrollspy

Nuashonraigh go huathoibríoch nascleanúint Bootstrap nó liostaigh comhpháirteanna grúpa bunaithe ar shuíomh an scrolla chun a chur in iúl cén nasc atá gníomhach san amharclann faoi láthair.

Ar an leathanach seo

Conas a oibríonn sé

Scoránaigh Scrollspy an .activerang ar <a>eilimintí ancaire ( ) nuair a scrollaítear isteach sa radharc an eilimint a bhfuil idtagairt di ag an ancaire href. Is fearr Scrollspy a úsáid i gcomhar le comhpháirt nó grúpa liosta Bootstrap nav , ach oibreoidh sé freisin le haon eilimintí ancaire ar an leathanach reatha. Seo mar a oibríonn sé.

Chun tús a chur leis, tá dhá rud ag teastáil ó scrollspy: nascleanúint, grúpa liostaí, nó sraith shimplí naisc, chomh maith le coimeádán inscrollaithe. Is féidir leis an gcoimeádán inscrollaithe a bheith <body>ina eilimint shaincheaptha le tacar heightagus overflow-y: scroll.
Ar an gcoimeádán inscrollaithe, cuir leis data-bs-spy="scroll"agus data-bs-target="#navId"cá navIdbhfuil an t-uathúil iddon loingseoireacht ghaolmhar. Bí cinnte a chur san áireamh freisin tabindex="0"chun rochtain mhéarchláir a chinntiú.
De réir mar a scrollaíonn tú an coimeádán “spied”, cuirtear .activerang leis agus baintear é de naisc ancaire laistigh den nascleanúint a bhaineann leis. idCaithfidh spriocanna inréite a bheith ag naisc , nó ní dhéantar neamhaird díobh. Mar shampla, <a href="#home">home</a>ní mór a bheith ag freagairt do rud éigin cosúil le DOM<div id="home"></div>
Tabharfar aird ar sprioceilimintí nach bhfuil infheicthe. Féach an rannán Eilimintí dofheicthe thíos.

Samplaí

Scrollaigh an limistéar faoi bhun an bharra nascleanúna agus féach ar an athrú gníomhach ranga. Oscail an roghchlár anuas agus féach ar na míreanna anuas a aibhsiú chomh maith.

An chéad cheannteideal

Seo roinnt ábhar áitshealbhóir don leathanach scrollspy. Tabhair faoi deara, agus tú ag scrollú síos an leathanach, go bhfuil an nasc loingseoireachta cuí aibhsithe. Déantar é a athdhéanamh ar fud an sampla comhpháirte. Leanaimid de bheith ag cur cóip shamplach níos mó anseo chun béim a chur ar an scrollú agus ar an aibhsiú.

An dara ceannteideal

An tríú ceannteideal

Ceathrú ceannteideal

An cúigiú ceannteideal

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

Oibríonn Scrollspy freisin le neadaithe .navs. .navMá tá nead .active, beidh a thuismitheoirí freisin .active. Scrollaigh an limistéar in aice leis an mbarra nascleanúna agus féach ar an athrú gníomhach ranga.

Mír 1

Coinnigh i gcuimhne go ndéanann an breiseán JavaScript iarracht an eilimint cheart a roghnú i measc gach rud a d'fhéadfadh a bheith le feiceáil. D’fhéadfadh go n-eascródh roinnt fadhbanna le spriocanna scrollspy iolracha ag an am céanna.

Mír 1-1

Mír 1-2

Mír 2

Mír 3

Mír 3-1

Mír 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>

Liosta grúpa

Oibríonn Scrollspy freisin le .list-groups. Scrollaigh an limistéar in aice leis an ngrúpa liosta agus féach ar an athrú gníomhach ranga.

Mír 1 Mír 2 Mír 3 Mír 4

Mír 1

Mír 2

Mír 3

Mír 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>

Ancairí simplí

Níl Scrollspy teoranta do nav comhpháirteanna agus grúpaí liosta, mar sin beidh sé ag obair ar aon <a>eilimintí ancaire sa doiciméad reatha. Scrollaigh an limistéar agus féach ar an .activeathrú ranga.

Mír 1 Mír 2 Mír 3 Mír 4 Mír 5

Mír 1

Mír 2

Mír 3

Mír 4

Mír 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>

Eilimintí neamh-fheiceálach

Tabharfar aird ar sprioceilimintí nach bhfuil infheicthe agus ní bhfaighidh .activerang a gcuid míreanna nascleanúna comhfhreagracha. Déanfaidh cásanna Scrollspy a thosaigh i bhfillteán neamh-fheiceálach neamhaird ar na sprioc-eilimintí go léir. Bain úsáid as an refreshmodh le seiceáil le haghaidh eilimintí inbhraite a luaithe a bhíonn an clúdach le feiceáil.

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

Úsáid

Trí tréithe sonraí

Chun iompar scrollspy a chur le do nascleanúint barrbharra go héasca, cuir data-bs-spy="scroll"leis an eilimint a bhfuil tú ag iarraidh spy a chur air (go hiondúil is é seo an <body>). Ansin cuir an data-bs-targettréith leis an idainm ranga nó an tuismitheoir eilimint d'aon .navchomhpháirt 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>

Trí JavaScript

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

Roghanna

Toisc gur féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript, is féidir leat ainm rogha a chur i gceangal le data-bs-, mar atá i data-bs-animation="{value}". Bí cinnte cineál an cháis d’ainm na rogha a athrú ó “ camelCase ” go “ kebab-case ” agus tú ag dul thar na roghanna trí tréithe sonraí. Mar shampla, úsáid data-bs-custom-class="beautifier"in ionad data-bs-customClass="beautifier".

Amhail Bootstrap 5.2.0, tacaíonn na comhpháirteanna go léir le tréith sonraí forchoimeádta turgnamhachadata-bs-config ar féidir cumraíocht chomhpháirt shimplí a áireamh mar theaghrán JSON. data-bs-config='{"delay":0, "title":123}'Nuair a bhíonn agus tréithe ag eilimint , is é an luach data-bs-title="456"deiridh a bheidh ann agus sáróidh na tréithe sonraí ar leith na luachanna a thugtar ar . Ina theannta sin, tá tréithe sonraí atá ann cheana in ann luachanna JSON cosúil le .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Ainm	Cineál	Réamhshocrú	Cur síos
`rootMargin`	teaghrán	`0px 0px -25%`	Intersection Observer rootMargin aonaid bhailí, agus suíomh scrollaithe á ríomh.
`smoothScroll`	Boole	`false`	Cumasaíonn sé scrollaithe mín nuair a chliceálann úsáideoir ar nasc a thagraíonn do rudaí inbhraite ScrollSpy.
`target`	teaghrán, eilimint DOM	`null`	Sonraítear eilimint chun breiseán Scrollspy a chur i bhfeidhm.
`threshold`	eagar	`[0.1, 0.5, 1]`	`IntersectionObserver` ionchur bailí tairsí , agus suíomh scrollaithe á ríomh.

Roghanna Dímheasta

Suas go dtí v5.1.3 bhí muid ag baint úsáide as offset& methodroghanna, a bhfuil dul i léig anois agus a n-ionad rootMargin. Chun comhoiriúnacht ar gcúl a choinneáil, leanfaimid orainn ag parsáil tugtha offsetdo rootMargin, ach bainfear an ghné seo i v6 .

Modhanna

Modh	Cur síos
`dispose`	Scriosann scrollspy eilimint. (Baintear sonraí stóráilte ar an eilimint DOM)
`getInstance`	Modh statach chun an ásc scrollspy a bhaineann le heilimint DOM a fháil.
`getOrCreateInstance`	Modh statach chun an ásc scrollspy a bhaineann le heilimint DOM a fháil, nó chun ceann nua a chruthú ar eagla nach dtosófaí é.
`refresh`	Nuair a bheidh tú ag cur nó ag baint eilimintí sa DOM, beidh ort an modh athnuachana a ghlaoch.

Seo sampla ag baint úsáide as an modh athnuachana:

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

Imeachtaí

Imeacht	Cur síos
`activate.bs.scrollspy`	Buaileann an teagmhas seo an eilimint scrollbharra aon uair a ghníomhaíonn an scrollspy ancaire.

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