Saltar al contenido principal Salta a docs navegación
in English

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

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

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-groupScrollspy 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-targetatributo ID kaqwan utaq clase kaqwan tayta elementomanta 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 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 autochayta akllanqa aswan allin ruwayta coordenadas de desplazamiento jap'inapaq. offsetchay Element.getBoundingClientRect()método nisqawanmi coordenadas de desplazamiento nisqakunata tarinqa. positionchaymanta HTMLElement.offsetTopchaymanta HTMLElement.offsetLeftpropiedades 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...
})