Svetuka kune chikuru content Svetuka kuenda kudocs navigation
in English

Scrollspy

Gadziridza otomatiki kufamba kweBootstrap kana rondedzero yezvikamu zveboka zvichibva pane yekumisikidza chinzvimbo kuratidza kuti ndechipi chinongedzo chiri kushanda munzvimbo yekuona.

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.

Muenzaniso mu navbar

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

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 wechitatu

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 wechina

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 wechishanu

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.

<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

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.

Chinhu 1-1

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.

Chinhu 1-2

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.

Chinhu 2

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.

Chinhu 3

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.

Chinhu 3-1

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.

Chinhu 3-2

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.

<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

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.

Chinhu 2

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.

Chinhu 3

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.

Chinhu 4

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.

<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. autoichasarudza yakanakisa nzira yekuwana mipumburu inorongedzerwa. offsetichashandisa Element.getBoundingClientRect()nzira yekuwana mipumburu inorongedzerwa. positionichashandisa iyo HTMLElement.offsetTopuye HTMLElement.offsetLeftzvivakwa 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...
})