Sgrolspy

Diweddaru llywio Bootstrap yn awtomatig neu restru cydrannau grŵp yn seiliedig ar safle sgrolio i nodi pa ddolen sy'n weithredol yn y porth gwylio ar hyn o bryd.

Ar y dudalen hon

Sut mae'n gweithio

Mae Scrollspy yn toglo'r .activedosbarth ar elfennau angor ( <a>) pan fydd yr elfen â'r idcyfeiriad y mae'r angor yn cyfeirio ati yn hrefcael ei sgrolio i'r golwg. Mae'n well defnyddio Scrollspy ar y cyd â chydran Bootstrap nav neu grŵp rhestr , ond bydd hefyd yn gweithio gydag unrhyw elfennau angor yn y dudalen gyfredol. Dyma sut mae'n gweithio.

I ddechrau, mae angen dau beth ar scrollspy: llywio, grŵp rhestr, neu set syml o ddolenni, ynghyd â chynhwysydd y gellir ei sgrolio. Gall y cynhwysydd sgroladwy fod <body>yn elfen wedi'i haddasu gyda set heighta overflow-y: scroll.
Ar y cynhwysydd sgroladwy, ychwanegwch data-bs-spy="scroll"a data-bs-target="#navId"ble navIdmae unigryw'r idllywio cysylltiedig. Byddwch yn siwr i gynnwys hefyd tabindex="0"i sicrhau mynediad bysellfwrdd.
Wrth i chi sgrolio'r cynhwysydd “spied”, mae .activedosbarth yn cael ei ychwanegu a'i ddileu o ddolenni angori yn y llywio cysylltiedig. Rhaid i gysylltiadau fod â idthargedau y gellir eu datrys, neu cânt eu hanwybyddu. Er enghraifft, <a href="#home">home</a>rhaid cyfateb i rywbeth tebyg i DOM<div id="home"></div>
Bydd elfennau targed nad ydynt yn weladwy yn cael eu hanwybyddu. Gweler yr adran Elfennau anweledig isod.

Enghreifftiau

Sgroliwch yr ardal o dan y bar llywio a gwyliwch y newid dosbarth gweithredol. Agorwch y gwymplen a gwyliwch yr eitemau cwymplen yn cael eu hamlygu hefyd.

Pennawd cyntaf

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sbïo sgrôl. Sylwch, wrth i chi sgrolio i lawr y dudalen, bod y cyswllt llywio priodol wedi'i amlygu. Mae'n cael ei ailadrodd trwy gydol yr enghraifft gydran. Rydyn ni'n parhau i ychwanegu mwy o gopi enghreifftiol yma i bwysleisio'r sgrolio a'r amlygu.

Ail bennawd

Trydydd pennawd

Pedwerydd pennawd

Pumed pennawd

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

Scrollspy hefyd yn gweithio gyda nythol .navs. .navOs yw nyth .active, bydd ei rieni hefyd .active. Sgroliwch yr ardal nesaf at y bar llywio a gwyliwch y newid dosbarth gweithredol.