Scrollspy nisqa
Kikinmanta musuqchay Bootstrap puriyta utaq lista qutu componentekuna kuyuchiy posición kaqpi mayqin t'inki kunan qhawana punkupi ruwasqa kaqta rikuchinapaq.
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ñalanankuid
.
Allin ruwasqa kaqtin, nav utaq lista qutuyki chaymanhina musuqyachinqa, .active
huk elementomanta wak kaqman claseta kuyuchispa tinkisqa metakunankumanhina.
Contenedores desplazables y acceso a teclado
Sichus huk kuyuchina waqaychanata ruwachkanki (hukmanta <body>
), huk huñuyuq kay height
chaymanta overflow-y: scroll;
chayman churasqa —huk lado tabindex="0"
teclado yaykuyta garantizananpaq.
Ejemplo en navbar
Navbar urapi 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
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.
Kimsa 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.
Tawa 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.
Pichqa 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.
<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 .nav
s nisqawanpas. Sichus huk nested .nav
kan chayqa .active
, tayta-mamanpas kanqa .active
. Navbarpa waqtanpi kaq áreata kuyuchiy chaymanta qhaway activo clase tikrayta.
Artículo 1
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.
Artículo 1-1
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.
Artículo 1-2
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.
Artículo 2
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.
Artículo 3
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.
Artículo 3-1
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.
Artículo 3-2
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.
<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-group
Scrollspy nisqapas s nisqawanmi llamkan . Lista qutupa waqtanpi kaq chiqanpi puriy chaymanta qhaway activo clase tikrayta.
Artículo 1
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.
Artículo 2
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.
Artículo 3
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.
Artículo 4
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.
<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-target
atributo ID kaqwan utaq clase kaqwan tayta elementomanta mayqin Bootstrap .nav
componente 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 imawanpas 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...
})