Scrollspy nisqa

Kikinmanta musuqchay Bootstrap puriyta utaq lista qutu componentekuna kuyuchiy posición kaqpi mayqin t'inki kunan qhawana punkupi ruwasqa kaqta rikuchinapaq.

Kay p'anqapi

Imayna llamkan

Scrollspy allin llamk'ananpaq huk pisi mañakuykunayuq:

Huk Bootstrap nav componente utaq lista qutupi llamk'achisqa kanan tiyan .
Scrollspy mañan position: relative;chay elementopi espía ruwasqaykipi, aswantaqa chay <body>.
Anclas ( <a>) nisqakunan necesitakun, chaywantaqmi huk elementota señalananku id.

Allin ruwasqa kaqtin, nav utaq lista qutuyki chaymanhina musuqyachinqa, .activehuk elementomanta wak kaqman claseta kuyuchispa tinkisqa metakunankumanhina.

Contenedores desplazables y acceso a teclado

Sichus huk kuyuchina waqaychanata ruwachkanki (hukmanta <body>), huk huñuyuq kay heightchaymanta overflow-y: scroll;chayman churasqa —huk lado tabindex="0"teclado yaykuyta garantizananpaq.

Navbarpa urayninpi kaq áreata kuyuchiy chaymanta qhaway activo clase tikrayta. Chay urayk’aq kaqkunapas resaltasqa kanqa.

Ñawpaq kaq umalliq

Kayqa wakin tiyanayuq willaymi scrollspy p'anqapaq. Reparay, p’anqata urayman purisqaykiman hina, chayman hina purinapaq t’inki resaltasqa kashan. Chayqa yapamanta ruwakun tukuy componente ejemplopi. Kaypi wakin aswan ejemplo copiata yapaykupuni, chaywantaq desplazamientota, resaltayta ima astawan kallpachayku.

Iskay kaq umalliq

Kimsa kaq umalliq

Tawa kaq umalliq

Pichqa kaq umalliq

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

Ejemplo con nav anidado

Scrollspy llamkantaqmi anidado .navs nisqawanpas. Sichus huk nested .navkan chayqa .active, tayta-mamanpas kanqa .active. Navbarpa waqtanpi kaq áreata kuyuchiy chaymanta qhaway activo clase tikrayta.

Artículo 1

Artículo 1-1

Artículo 1-2

Artículo 2

Artículo 3

Artículo 3-1

Artículo 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>

Lista-grupo nisqawan ejemplo

.list-groupScrollspy nisqapas s nisqawanmi llamkan . Lista qutupa waqtanpi kaq chiqanpi puriy chaymanta qhaway activo clase tikrayta.

Artículo 1 Artículo 2 Artículo 3 Artículo 4

Artículo 1

Artículo 2

Artículo 3

Artículo 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>

Uso

Atributos de datos nisqawan

Scrollspy ruwayta mana sasachu yapanaykipaq pata barra puriyniykiman, yapay data-bs-spy="scroll"elementoman yapay mayqinpichus espionayta munanki (aswan típicamente kay kanman chay <body>). Chaymanta yapay data-bs-targetatributo ID kaqwan utaq clase kaqwan tayta elemento kaqmanta mayqin Bootstrap .navcomponente kaqmanta.

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>

JavaScript nisqawan

CSS nisqaykipi yapasqaykimanta position: relative;, JavaScript nisqawan scrollspy nisqaman waqyay:

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

ID nisqa allichanapaq metakuna necesitakun

Navbar t'inkikuna allichanapaq id metakunayuq kanan tiyan. Ejemplopaq, a <a href="#home">home</a>DOM nisqapi imapas tupananmi imaynan <div id="home"></div>.

Mana rikukuq meta elementokuna mana qhawasqa

Mana rikukuq elementokuna meta kaqmanta mana qhawasqachu kanqa chaymanta tupaq nav elementokuna mana hayk'aqpas resaltasqachu kanqa.

Métodos

musuqyachiy

Scrollspy DOM kaqmanta elementokuna yapay utaq hurquywan kuska llamk'achkaspa, musuqyachiy ñanta chayhina waqyanayki tiyan:

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

wischuy

Huk elementopa scrollspy nisqatam chinkachin. (DOM elementopi waqaychasqa willayta hurqun)

GetInstancia

Método estático mayqinchus huk DOM elementowan tinkisqa scrollspy instanciata jap'iyta atikun

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

Instanciata tariyUtaq Ruway

Método estático mayqinchus scrollspy instanciata huk DOM elementowan tinkisqata jap'iyta atikun, utaq musuq ruwayta sichus mana qallarisqachu karqa

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

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-bs-, imaynachus data-bs-offset="".

Suti	Niraq	Ñawpaqchasqa	Willay
`offset`	yupay	`10`	Pixelkuna patamanta offset kananpaq, kuyuypa posiciónninta yupaspa.
`method`	qaytu	`auto`	Tarin mayqin t'aqapichus elemento espionado kachkan `auto`chayta akllanqa aswan allin ruwayta coordenadas de desplazamiento jap'inapaq. `offset`chay `Element.getBoundingClientRect()`método nisqawanmi coordenadas de desplazamiento nisqakunata tarinqa. `position`chaymanta `HTMLElement.offsetTop`chaymanta `HTMLElement.offsetLeft`propiedades nisqakunata llamk'achinqa kuyuchina coordenadas nisqakunata tarinapaq.
`target`	q'aytu \| jTapukuy objeto \| Elemento DOM nisqa		Scrollspy plugin churanapaq elemento nisqa.

Eventos nisqakuna

Tipo de evento	Willay
`activate.bs.scrollspy`	Kay ruwayqa kuyuchina elementopi rawrarin mayk'aqllapas huk musuq elemento scrollspy kaqwan llamk'achisqa kaptin.

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

Scrollspy nisqa

Imayna llamkan

Contenedores desplazables y acceso a teclado

Ejemplo en navbar

Ñawpaq kaq umalliq

Iskay kaq umalliq

Kimsa kaq umalliq

Tawa kaq umalliq

Pichqa kaq umalliq

Ejemplo con nav anidado

Artículo 1

Artículo 1-1

Artículo 1-2

Artículo 2

Artículo 3

Artículo 3-1

Artículo 3-2

Lista-grupo nisqawan ejemplo

Artículo 1

Artículo 2

Artículo 3

Artículo 4

Uso

Atributos de datos nisqawan

JavaScript nisqawan

ID nisqa allichanapaq metakuna necesitakun

Mana rikukuq meta elementokuna mana qhawasqa

Métodos

musuqyachiy

wischuy

GetInstancia

Instanciata tariyUtaq Ruway

Akllanakuna

Eventos nisqakuna