Scrollspy

Gadzirisa otomatiki kufamba kweBootstrap kana rondedzero yezvikamu zveboka zvichibva pachinzvimbo chemupumburu kuratidza kuti ndechipi chinongedzo chiri kushanda munzvimbo yekuona.

Pa peji ino

Zvinoshanda sei

Scrollspy ine zvishoma zvinodiwa kuti ishande nemazvo:

Inofanirwa kushandiswa paBootstrap nav chikamu kana runyorwa boka .
Scrollspy inoda position: relative;pane chinhu chauri kuongorora, kazhinji iyo <body>.
Anchors ( <a>) anodiwa uye anofanira kunongedza kune chinhu chine icho id.

Kana yaitwa zvinobudirira, yako nav kana boka rezita rinogadziridza zvinoenderana, richifambisa .activekirasi kubva pane chimwe chinhu kuenda kune chinotevera zvichienderana nezvavanovavarira.

Zvigaba zvinotakurika uye kuwana keyboard

Kana iwe uri kugadzira chigadziko chinotenderedzwa (kunze kweiyo <body>), ita shuwa kuti une heightseti uye overflow-y: scroll;uiise pairi-pamwe nea tabindex="0"kuti uve nechokwadi chekuwana kiibhodhi.

Skrodza nzvimbo iri pazasi pebhari uye tarisa iyo inoshanda kirasi shanduko. Zvinhu zvekudonhedza zvicharatidzwa zvakare.

Musoro wekutanga

Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.

Musoro wechipiri

Musoro wechitatu

Musoro wechina

Musoro wechishanu

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

Muenzaniso une nested nav

Scrollspy inoshandawo ne nested .navs. Kana dendere .navriripo .active, vabereki varo vanenge varivo .active. Skoka nzvimbo iri padyo nebhari uye tarisa iyo inoshanda kirasi shanduko.

Chinhu 1

Chinhu 1-1

Chinhu 1-2

Chinhu 2

Chinhu 3

Chinhu 3-1

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

Muenzaniso une list-group

Scrollspy inoshandawo nes .list-group. Skrodza nzvimbo iri padivi peboka rezita uye woona shanduko yekirasi inoshanda.

Chinhu 1 Chinhu 2 Chinhu 3 Chinhu 4

Chinhu 1

Chinhu 2

Chinhu 3

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

Usage

Via data hunhu

Kuti uwedzere nyore scrollspy maitiro kune yako topbar navigation, wedzera data-bs-spy="scroll"kune chinhu chaunoda kunosora (kazhinji ichi chingave icho <body>). Wobva wawedzera data-bs-targethunhu neID kana kirasi yemubereki chinhu cheBootstrap .navchikamu.

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>

Via JavaScript

Mushure mekuwedzera position: relative;muCSS yako, fonera iyo scrollspy kuburikidza neJavaScript:

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

Resolvable ID zvinangwa zvinodiwa

Navbar links dzinofanirwa kunge dziine zvinogadziriswa id zvinangwa. Semuenzaniso, <a href="#home">home</a>inofanirwa kuenderana nechimwe chinhu chiri muDOM senge <div id="home"></div>.

Zvisingaonekwe zvinotariswa zvakafuratirwa

Zvinhu zvakanangwa zvisingaonekwe zvichafuratirwa uye zvinhu zvazvo zvinoenderana nazvo hazvimbofa zvakaiswa pachena.

Nzira

zorodza

Paunenge uchishandisa scrollspy pamwe nekuwedzera kana kubvisa zvinhu kubva kuDOM, iwe unozofanirwa kufonera nzira yekuzorodza senge:

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

kurasa

Inoparadza chinhu chinonzi scrollspy. (Inobvisa data rakachengetwa pachinhu cheDOM)

getInstance

Static nzira iyo inokutendera iwe kuti uwane iyo scrollspy muenzaniso yakabatana neDOM chinhu

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

getOrCreateInstance

Static nzira iyo inokutendera iwe kuti uwane iyo scrollspy muenzaniso yakabatana neDOM chinhu, kana kugadzira imwe nyowani kana isina kutangwa.

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-bs-, semu data-bs-offset="".

Zita	Type	Default	Tsanangudzo
`offset`	nhamba	`10`	Mapikisi ekubvisa kubva kumusoro paunenge uchiverenga nzvimbo yekupumburudza.
`method`	tambo	`auto`	Inotsvaga kuti ndeipi chikamu chakasora chirimo. `auto`ichasarudza nzira yakanakisa yekuwana mipumburu inorongeka. `offset`ichashandisa `Element.getBoundingClientRect()`nzira yekuwana mipumburu inorongedzerwa. `position`ichashandisa iyo `HTMLElement.offsetTop`uye `HTMLElement.offsetLeft`zvivakwa kuwana mipumburu inorongedzerwa.
`target`	tambo \| jQuery chinhu \| DOM chikamu		Inotsanangura chinhu chekushandisa Scrollspy plugin.

Zviitiko

Chiitiko mhando	Tsanangudzo
`activate.bs.scrollspy`	Chiitiko ichi chinopisa pachinhu chemupumburu pese kana chinhu chitsva chikavhurwa neiyo scrollspy.

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

Scrollspy

Zvinoshanda sei

Zvigaba zvinotakurika uye kuwana keyboard

Muenzaniso mu navbar

Musoro wekutanga

Musoro wechipiri

Musoro wechitatu

Musoro wechina

Musoro wechishanu

Muenzaniso une nested nav

Chinhu 1

Chinhu 1-1

Chinhu 1-2

Chinhu 2

Chinhu 3

Chinhu 3-1

Chinhu 3-2

Muenzaniso une list-group

Chinhu 1

Chinhu 2

Chinhu 3

Chinhu 4

Usage

Via data hunhu

Via JavaScript

Resolvable ID zvinangwa zvinodiwa

Zvisingaonekwe zvinotariswa zvakafuratirwa

Nzira

zorodza

kurasa

getInstance

getOrCreateInstance

Options

Zviitiko