Neidio i'r prif gynnwys Neidio i lywio dogfennau
in English

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 gan Scrollspy ychydig o ofynion i weithredu'n iawn:

  • Rhaid ei ddefnyddio ar gydran llywio Bootstrap neu grŵp rhestr .
  • Scrollspy ei gwneud yn ofynnol position: relative;ar yr elfen yr ydych yn ysbïo ar, fel arfer y <body>.
  • Mae angen angorau ( <a>) a rhaid iddynt bwyntio at elfen gyda hynny id.

Pan gânt eu gweithredu'n llwyddiannus, bydd eich grŵp llywio neu restr yn diweddaru yn unol â hynny, gan symud y .activedosbarth o un eitem i'r llall yn seiliedig ar eu targedau cysylltiedig.

Cynwysyddion sgrolio a mynediad bysellfwrdd

Os ydych chi'n gwneud cynhwysydd sgroladwy (ac eithrio'r <body>), gwnewch yn siŵr bod gennych heightset a'i osod overflow-y: scroll;arno - ochr yn ochr ag tabindex="0"i sicrhau mynediad bysellfwrdd.

Enghraifft yn navbar

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

Pennawd cyntaf

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

Trydydd pennawd

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

Pedwerydd pennawd

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

Pumed pennawd

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

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

Enghraifft gyda llywio nythu

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.

Eitem 1

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

Eitem 1-1

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

Eitem 1-2

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

Eitem 2

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

Eitem 3

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

Eitem 3-1

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

Eitem 3-2

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

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

Enghraifft gyda rhestr-grŵp

Scrollspy hefyd yn gweithio gyda .list-groups. Sgroliwch yr ardal nesaf at y grŵp rhestr a gwyliwch y newid dosbarth gweithredol.

Eitem 1

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

Eitem 2

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

Eitem 3

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

Eitem 4

Dyma rywfaint o gynnwys dalfan ar gyfer y dudalen sgroliwr. Sylwch, wrth i chi sgrolio i lawr y dudalen, fod 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.

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

Defnydd

Trwy briodoleddau data

Er mwyn ychwanegu ymddygiad ysbïo sgrolio at eich llywio bar uchaf yn hawdd, ychwanegwch data-bs-spy="scroll"at yr elfen rydych chi am sbïo arno (yn fwyaf nodweddiadol dyma fyddai'r <body>). Yna ychwanegwch y data-bs-targetpriodoledd gyda'r ID neu ddosbarth y rhiant elfen o unrhyw .navgydran 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>

Trwy JavaScript

Ar ôl ychwanegu position: relative;eich CSS i mewn, ffoniwch y scrollspy trwy JavaScript:

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

Angen targedau ID y gellir eu datrys

Rhaid i ddolenni Navbar gael targedau adnabod y gellir eu datrys. Er enghraifft, <a href="#home">home</a>rhaid cyfateb i rywbeth yn y DOM fel <div id="home"></div>.

Elfennau targed anweladwy wedi'u hanwybyddu

Bydd elfennau targed nad ydynt yn weladwy yn cael eu hanwybyddu ac ni fydd eu heitemau llywio cyfatebol byth yn cael eu hamlygu.

Dulliau

adfywio

Wrth ddefnyddio scrollspy ar y cyd ag ychwanegu neu dynnu elfennau o'r DOM, bydd angen i chi ffonio'r dull adnewyddu fel hyn:

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

gwared

Yn dinistrio sgrôlsbïwr elfen. (Yn dileu data sydd wedi'i storio ar yr elfen DOM)

caelInstance

Dull statig sy'n eich galluogi i gael yr enghraifft sgroliwr sy'n gysylltiedig ag elfen DOM

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

getOrCreateInstance

Dull statig sy'n eich galluogi i gael yr enghraifft sgroliwr sy'n gysylltiedig ag elfen DOM, neu greu un newydd rhag ofn na chafodd ei gychwyn

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

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-bs-, fel yn data-bs-offset="".

Enw Math Diofyn Disgrifiad
offset rhif 10 Picseli i'w gwrthbwyso o'r brig wrth gyfrifo safle'r sgrôl.
method llinyn auto Yn darganfod ym mha adran mae'r elfen ysbïedig. autoBydd yn dewis y dull gorau o gael cyfesurynnau sgrolio. offsetyn defnyddio'r Element.getBoundingClientRect()dull i gael cyfesurynnau sgrolio. positionyn defnyddio'r HTMLElement.offsetTopa HTMLElement.offsetLeftphriodweddau i gael cyfesurynnau sgrolio.
target llinyn | jQuery gwrthrych | elfen DOM Yn pennu elfen i wneud cais Scrollspy plugin.

Digwyddiadau

Math o ddigwyddiad Disgrifiad
activate.bs.scrollspy Mae'r digwyddiad hwn yn tanio'r elfen sgrolio pryd bynnag y bydd eitem newydd yn cael ei actifadu gan y sgrôlspy. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})