Scrollspy

Ùraich gu fèin-ghluasadach seòladh Bootstrap no liostaich co-phàirtean buidhne stèidhichte air suidheachadh scrollaidh gus sealltainn dè an ceangal a tha gnìomhach sa phort-seallaidh an-dràsta.

Air an duilleig seo

Mar a tha e ag obair

Bidh Scrollspy a’ togail a’ .activechlas air <a>eileamaidean acair ( ) nuair a thèid an eileamaid leis an idiomradh leis na h-acair a hrefthoirt a-steach don t-sealladh. Tha e nas fheàrr Scrollspy a chleachdadh an co-bhonn ri co-phàirt Bootstrap nav no buidheann liosta , ach obraichidh e cuideachd le eileamaidean acair sam bith air an duilleag làithreach. Seo mar a tha e ag obair.

Airson tòiseachadh, feumaidh scrollspy dà rud: seòladh, buidheann liosta, no seata de cheanglaichean sìmplidh, a bharrachd air soitheach a ghabhas gluasad. Faodaidh an soitheach scrollable a bhith na <body>eileamaid àbhaisteach le seata heightagus overflow-y: scroll.
Air an t-soitheach scrollable, cuir ris data-bs-spy="scroll"agus data-bs-target="#navId"càite a bheil an seòladh navIdsònraichte a tha co-cheangailte ris. idDèan cinnteach cuideachd gun cuir thu a-steach tabindex="0"gus dèanamh cinnteach gum bi cothrom air meur-chlàr.
Mar a sgrìobhas tu an soitheach “spied”, thèid .activeclas a chuir ris agus a thoirt air falbh bho cheanglaichean acair taobh a-staigh an t-seòlaidh co-cheangailte ris. Feumaidh idtargaidean so-rèiteach a bhith aig ceanglaichean, air neo cha tèid an dearmad. Mar eisimpleir, <a href="#home">home</a>feumaidh rud a bhith co-fhreagairt ri rudeigin mar DOM<div id="home"></div>
Cha tèid aire a thoirt do eileamaidean targaid nach eil rim faicinn. Faic an earrann Eileamaidean neo-fhaicsinneach gu h -ìosal.

Eisimpleirean

Sgrolaich an raon gu h-ìosal fon bhàr-seòlaidh agus cùm sùil air an atharrachadh clas gnìomhach. Fosgail an clàr-taice a-nuas agus cùm sùil air na nithean a tha a’ tuiteam sìos air an comharrachadh cuideachd.

A' chiad cheann

Seo cuid de shusbaint neach-àite airson an duilleag scrollspy. Thoir an aire nuair a sgrolaicheas tu sìos an duilleag, gu bheil an ceangal seòlaidh iomchaidh air a chomharrachadh. Tha e air ath-aithris air feadh an eisimpleir co-phàirteach. Bidh sinn a’ cur beagan a bharrachd leth-bhreac eisimpleir ris an seo gus cuideam a chuir air an scrollaidh agus an soilleireachadh.

An dara ceann

An treas ceann

An ceathramh ceann

An còigeamh ceann

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

Scrollspy cuideachd ag obair le neadachadh .navs. .navMa tha nead .active, bidh a phàrantan cuideachd .active. Scrollaich an raon ri taobh a’ bhàr seòlaidh agus cùm sùil air an atharrachadh clas gnìomhach.

Nì 1

Cumaibh cuimhne gu bheil am plugan JavaScript a 'feuchainn ris an eileamaid cheart a thaghadh am measg a h-uile dad a dh' fhaodadh a bhith follaiseach. Dh’ fhaodadh grunn thargaidean scrollspy faicsinneach aig an aon àm cuid de chùisean adhbhrachadh.

Nì 1-1

Nì 1-2

Nì 2

Nì 3

Nì 3-1

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

Buidheann liosta

Scrollspy cuideachd ag obair le .list-groups. Sgrolaich an raon ri taobh a’ bhuidheann liosta agus coimhead air an atharrachadh clas gnìomhach.

Nì 1 Nì 2 Nì 3 Nì 4

Nì 1

Nì 2

Nì 3

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

Acraichean sìmplidh

Chan eil Scrollspy cuingealaichte ri co-phàirtean nav agus buidhnean liosta, agus mar sin obraichidh e air <a>eileamaidean acair sam bith san sgrìobhainn làithreach. Scrollaich an sgìre agus coimhead air a’ .activechlas ag atharrachadh.

Nì 1 Nì 2 Nì 3 Nì 4 Nì 5

Nì 1

Nì 2

Nì 3

Nì 4

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

Feartan neo-fhaicsinneach

Cha tèid aire a thoirt do eileamaidean targaid nach eil rim faicinn agus chan fhaigh na stuthan seòlaidh co-fhreagarrach aca .activeclas. Bidh suidheachaidhean Scrollspy a chaidh a thòiseachadh ann am pasgan nach fhaicear a’ seachnadh a h-uile eileamaid targaid. Cleachd an refreshdòigh gus sgrùdadh a dhèanamh airson eileamaidean faicsinneach aon uair ‘s gum bi am pasgan ri fhaicinn.

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

Cleachdadh

Tro fheartan dàta

Gus giùlan scrollaidh a chuir ris an t-seòladh bàr-mullaich agad gu furasta, cuir data-bs-spy="scroll"ris an eileamaid a tha thu airson brath a ghabhail air (mar as trice b’ e seo am faidhle <body>). An uairsin cuir a-steach am data-bs-targetfeart le idainm no clas an eileamaid phàrant de phàirt Bootstrap sam bith .nav.

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

Air sgàth javascript

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

Roghainnean

Leis gum faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript, faodaidh tu ainm roghainn a chuir ri data-bs-, mar ann an data-bs-animation="{value}". Dèan cinnteach gun atharraich thu seòrsa cùis an ainm roghainn bho “ camelCase ” gu “ kebab-case ” nuair a thèid thu seachad air na roghainnean tro bhuadhan dàta. Mar eisimpleir, cleachd data-bs-custom-class="beautifier"an àite data-bs-customClass="beautifier".

Mar Bootstrap 5.2.0, tha na pàirtean uile a’ toirt taic do fheart dàta glèidhte deuchainneachdata-bs-config a dh’ fhaodas rèiteachadh phàirtean sìmplidh a chumail mar shreang JSON. Nuair a tha data-bs-config='{"delay":0, "title":123}'agus data-bs-title="456"buadhan aig eileamaid, bidh an titleluach deireannach 456agus bidh na buadhan dàta fa leth a’ dol thairis air na luachan a chaidh a thoirt seachad air data-bs-config. A bharrachd air an sin, tha na feartan dàta a th’ ann mar-thà comasach air luachan JSON mar data-bs-delay='{"show":0,"hide":150}'.

Ainm	Seòrsa	Deònach	Tuairisgeul
`rootMargin`	sreang	`0px 0px -25%`	Intersection Observer rootMargin aonadan dligheach, nuair a thathar a’ tomhas suidheachadh scrollaidh.
`smoothScroll`	boolean	`false`	A ’comasachadh scrollaidh rèidh nuair a phutas neach-cleachdaidh air ceangal a tha a’ toirt iomradh air nithean faicsinneach ScrollSpy.
`target`	sreang, eileamaid DOM	`null`	Sònraich eileamaid airson plugan Scrollspy a chuir an sàs.
`threshold`	eagar	`[0.1, 0.5, 1]`	`IntersectionObserver` cuir a-steach dligheach stairsneach , nuair a thathar a’ tomhas suidheachadh scrollaidh.

Roghainnean neo-leasaichte

Suas gu v5.1.3 bha sinn a’ cleachdadh offset& methodroghainnean, a tha a-nis air an ìsleachadh agus rootMargin. Gus co-chòrdalachd air ais a chumail, cumaidh sinn oirnn a’ parsadh a chaidh a thoirt offsetdo rootMargin, ach thèid am feart seo a thoirt air falbh ann an v6 .

Dòighean-obrach

Dòigh-obrach	Tuairisgeul
`dispose`	A 'sgrios scrollspy eileamaid. (Thoir air falbh dàta air a stòradh air an eileamaid DOM)
`getInstance`	Modh statach gus an eisimpleir scrollspy fhaighinn co-cheangailte ri eileamaid DOM.
`getOrCreateInstance`	Dòigh statach gus an eisimpleir scrollspy fhaighinn co-cheangailte ri eileamaid DOM, no fear ùr a chruthachadh gun fhios nach deach a thòiseachadh.
`refresh`	Nuair a bhios tu a’ cur ris no a’ toirt air falbh eileamaidean san DOM, feumaidh tu an dòigh ùrachaidh a ghairm.

Seo eisimpleir a’ cleachdadh an dòigh ùrachaidh:

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

Tachartasan

Tachartas	Tuairisgeul
`activate.bs.scrollspy`	Bidh an tachartas seo a’ losgadh air an eileamaid scrollaidh nuair a thèid acair a chuir an gnìomh leis an scrollspy.

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