Scrollspy

Aġġorna awtomatikament in-navigazzjoni Bootstrap jew elenka l-komponenti tal-grupp ibbażati fuq il-pożizzjoni tal-iscroll biex tindika liema link hija attwalment attiva fil-viewport.

Fuq din il-paġna

Kif taħdem

Scrollspy għandu ftit rekwiżiti biex jaħdem sew:

Għandu jintuża fuq komponent Bootstrap nav jew grupp ta 'lista .
Scrollspy jirrikjedi position: relative;fuq l-element li qed tispija fuqu, normalment il- <body>.
Ankri ( <a>) huma meħtieġa u għandhom jindikaw element ma ' dak id.

Meta tiġi implimentata b'suċċess, in-nav jew il-grupp tal-lista tiegħek ser jaġġorna kif xieraq, u jċaqlaq il- .activeklassi minn oġġett għall-ieħor ibbażat fuq il-miri assoċjati tagħhom.

Kontenituri li jistgħu jiskrollaw u aċċess għat-tastiera

Jekk qed tagħmel kontenitur li jiskrollabbli (minbarra l- <body>), kun żgur li jkollok heightsett u overflow-y: scroll;applikat miegħu—flimkien ma’ tabindex="0"biex tiżgura aċċess għat-tastiera.

Skrollja ż-żona taħt in-navbar u ara l-bidla fil-klassi attiva. L-oġġetti dropdown se jiġu enfasizzati wkoll.

L-ewwel intestatura

Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.

It-tieni intestatura

It-tielet intestatura

Ir-raba' intestatura

Il-ħames intestatura

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

Eżempju b'nav nested

Scrollspy jaħdem ukoll ma nested .navs. Jekk neted .navhuwa .active, il-ġenituri tiegħu se jkunu wkoll .active. Skrollja ż-żona ħdejn in-navbar u ara l-bidla tal-klassi attiva.

Punt 1

Punt 1-1

Punt 1-2

Punt 2

Punt 3

Punt 3-1

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

Eżempju bil-lista-grupp

Scrollspy jaħdem ukoll ma ' .list-groups. Skrollja ż-żona ħdejn il-grupp tal-lista u ara l-bidla tal-klassi attiva.

Punt 1 Punt 2 Punt 3 Punt 4

Punt 1

Punt 2

Punt 3

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

Użu

Via attributi tad-data

Biex iżżid faċilment l-imġieba scrollspy man-navigazzjoni topbar tiegħek, żid data-bs-spy="scroll"mal-element li trid tispija fuqu (l-aktar tipikament dan ikun il- <body>). Imbagħad żid l- data-bs-targetattribut bl-ID jew il-klassi tal-element ġenitur ta 'kwalunkwe .navkomponent 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>

Via JavaScript

Wara li żżid position: relative;fis-CSS tiegħek, ċempel l-iscrollspy permezz ta' JavaScript:

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

Miri ta' ID riżolvibbli meħtieġa

Ir-rabtiet tan-Navbar għandu jkollhom miri id risolvibbli. Per eżempju, <a href="#home">home</a>għandu jikkorrispondi għal xi ħaġa fid-DOM bħal <div id="home"></div>.

Elementi fil-mira mhux viżibbli injorati

Elementi fil-mira li mhumiex viżibbli se jiġu injorati u l-oġġetti tan-nav korrispondenti tagħhom qatt mhu se jiġu enfasizzati.

Metodi

aġġorna

Meta tuża scrollspy flimkien maż-żieda jew it-tneħħija ta 'elementi mid-DOM, ikollok bżonn issejjaħ il-metodu ta' aġġornar hekk:

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

jiddisponi

Jeqred scrollspy ta' element. (Tneħħi d-dejta maħżuna fuq l-element DOM)

getInstance

Metodu statiku li jippermettilek tikseb l-iscrollspy istanza assoċjata ma 'element DOM

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

getOrCreateInstance

Metodu statiku li jippermettilek li tikseb l-iscrollspy istanza assoċjata ma 'element DOM, jew toħloq waħda ġdida f'każ li ma kienx inizjalizzat

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

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-bs-, bħal f' data-bs-offset="".

Isem	Tip	Default	Deskrizzjoni
`offset`	numru	`10`	Pixels biex ipattu minn fuq meta tikkalkula l-pożizzjoni tal-iscroll.
`method`	spag	`auto`	Isib f'liema sezzjoni jinsab l-element spied. `auto`Se jagħżel l-aħjar metodu biex tikseb il-koordinati tal-iscroll. `offset`se tuża l- `Element.getBoundingClientRect()`metodu biex tikseb il-koordinati tal-iscroll. `position`se tuża l- `HTMLElement.offsetTop`u `HTMLElement.offsetLeft`proprjetajiet biex tikseb koordinati tal-iscroll.
`target`	spag \| Oġġett jQuery \| Element DOM		Jispeċifika l-element biex japplika Scrollspy plugin.

Avvenimenti

Tip ta' avveniment	Deskrizzjoni
`activate.bs.scrollspy`	Dan l-avveniment jispara fuq l-element tal-iscroll kull meta oġġett ġdid jiġi attivat mill-iscrollspy.

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

Scrollspy

Kif taħdem

Kontenituri li jistgħu jiskrollaw u aċċess għat-tastiera

Eżempju fin-navbar

L-ewwel intestatura

It-tieni intestatura

It-tielet intestatura

Ir-raba' intestatura

Il-ħames intestatura

Eżempju b'nav nested

Punt 1

Punt 1-1

Punt 1-2

Punt 2

Punt 3

Punt 3-1

Punt 3-2

Eżempju bil-lista-grupp

Punt 1

Punt 2

Punt 3

Punt 4

Użu

Via attributi tad-data

Via JavaScript

Miri ta' ID riżolvibbli meħtieġa

Elementi fil-mira mhux viżibbli injorati

Metodi

aġġorna

jiddisponi

getInstance

getOrCreateInstance

Għażliet

Avvenimenti