Scrollspy rehegua

Embopyahu ijeheguiete Bootstrap jeguata térã lista aty componentekuéra oñemopyendáva desplazamiento ñemohenda rehe ohechauka hag̃ua mbaꞌe joajuhapa oĩ koꞌág̃aite activo jehechaukaha-pe.

Ko páhinape

Mba’éichapa omba’apo

Scrollspy ombohasa .activemboꞌepy umi elemento ancla ( <a>) rehegua ojedesplaza jave jehechaukarãme pe elemento orekóva idreferenciado umi ancla rehegua href. Scrollspy ojepuru porãve oñembojoajúvo peteĩ componente nav Bootstrap térã lista aty ndive , ha katu ombaꞌapóta avei oimeraẽ elemento ancla rehegua ndive oĩva página koꞌag̃aguápe. Péina mba'éichapa omba'apo.

Oñepyrũ hag̃ua, scrollspy oikotevẽ mokõi mbaꞌe: peteĩ jeguata, lista aty térã peteĩ enlace simple, ha avei peteĩ mbaꞌeryru ojedesplazakuaáva. Pe mbaꞌeryru ojedesplazakuaáva ikatu haꞌe pe <body>térã peteĩ elemento personalizado orekóva peteĩ conjunto heightha overflow-y: scroll.
Pe mba’e’oka ojedesplazakuaávape, emoĩ data-bs-spy="scroll"ha data-bs-target="#navId"moõpa navIdoĩ pe ijojaha’ỹva idpe navegación ojoajúva rehegua. Ejesareko avei emoĩ tabindex="0"hag̃ua peteĩ easegura hag̃ua teclado jeike.
Ojedesplazávo contenedor “espiado”, .activeoñembojoapy ha ojeipe’a peteĩ clase umi enlace anclaje-gui navegación asociada ryepýpe. Umi joajuha oguerekova’erã umi mba’e’oka ojerresolvéva id, ndaupéichairamo oñemboyke. Techapyrã, peteĩ <a href="#home">home</a>okorrespondevaꞌerã peteĩ mbaꞌe oĩva DOM-pe haꞌeháicha<div id="home"></div>
Umi elemento destino ndojehecháiva oñemboykéta. Ehecha pe sección Elementos ndojehecháiva iguýpe.

Tembiecharã

Emoinge pe área oĩva navbar guýpe ha ehecha pe clase activa ñemoambue. Eipe’a menú desplegable ha ehecha umi mba’e desplegable ojehechauka avei.

Peteĩha rubro

Kóva ha’e peteĩ contenido tenda’i rehegua scrollspy página-pe g̃uarã. Eñatendéke redesplaza jave pe páhinape, ojerresaltaha pe enlace de navegación oĩ porãva. Oje’e jey componente techapyrã pukukue javeve. Ñamoĩ meme ko’ápe peteĩ copia techapyrãve ñamomba’eguasu haĝua pe desplazamiento ha resaltado.

Mokõiha rubro

Mbohapyha vore

Irundyha vore

Pokõiha rubro

<nav id="navbar-example2" class="navbar bg-light px-3 mb-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-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" 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>

Anidado nav rehegua

Scrollspy ombaꞌapo avei .navs anidado reheve. Peteĩ anidado .navha'éramo .active, ituvakuéra ha'éta avei .active. Emoinge pe área oĩva navbar ykére ha ehecha pe clase activa ñemoambue.

Artículo 1 rehegua

Eñongatu ne akãme JavaScript mboajepyréva oñeha’ãha oiporavo elemento oikeporãva opaite ikatúva ojehecha apytépe. Heta ojehecháva scrollspy blanco peteĩ jave ikatu omoheñói algunos problemas.

Artículo 1-1 rehegua

Artículo 1-2 rehegua

Artículo 2 rehegua

Artículo 3 rehegua

Artículo 3-1 rehegua

Artículo 3-2 rehegua

<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <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>

  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>...</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>...</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>...</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>...</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>...</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>...</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

Aty lista rehegua

Scrollspy omba’apo avei .list-groups ndive. Emoinge pe área oĩva lista aty ykére ha ehecha pe clase activa ñemoambue.

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

Artículo 1 rehegua

Artículo 2 rehegua

Artículo 3 rehegua

Artículo 4 rehegua

<div class="row">
  <div class="col-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>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" 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>
  </div>
</div>

Anclaje simple rehegua

Scrollspy ndaha’éi componente nav ha lista aty’ípe añoite, upévare omba’apóta oimeraẽ <a>elemento anclaje rehe kuatia ko’ag̃aguápe. Ejedesplaza pe área ha ehecha pe .activeclase okambiaha.

Artículo 1 rehegua Artículo 2 rehegua Artículo 3 rehegua Artículo 4 rehegua Artículo 5 rehegua

Artículo 1 rehegua

Artículo 2 rehegua

Artículo 3 rehegua

Artículo 4 rehegua

Artículo 5 rehegua

<div class="row">
  <div class="col-4">
    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="simple-list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="simple-list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="simple-list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="simple-list-item-4">Item 4</h4>
      <p>...</p>
      <h4 id="simple-list-item-5">Item 5</h4>
      <p>...</p>
    </div>
  </div>
</div>

Umi elemento ndojehecháiva

Umi elemento destino ndojehecháiva oñemboykéta ha umi elemento nav okorrespondéva ndohupytýi peteĩ .activeclase. Umi instancia Scrollspy oñepyrũva peteĩ envoltura ndojehecháivape omboykéta opaite elemento destino rehegua. Eipuru pe refreshmétodo ehecha hagua umi elemento ojehechakuaáva ojehecha rire pe envoltura.

document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
  el.addEventListener('shown.bs.tab', () => {
    const target = el.getAttribute('data-bs-target')
    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
  })
})

Jeporu rehegua

Umi atributo de datos rupive

Oñemoĩ hag̃ua scrollspy jeiko pya’e nde barra yvategua jeguatarãme, emoĩve data-bs-spy="scroll"pe elemento ehechasévape (jepiveguaichavéva kóva ha’éta pe <body>). Upéi emoĩve data-bs-targetatributo orekóva idtérã clase réra elemento túva oimeraẽva .navcomponente Bootstrap rehegua.

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

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

Opciones rehegua

Umi opción ikatuháicha oñembohasa atributo de datos térã JavaScript rupive, ikatu emoĩ peteĩ opción réra data-bs-, -peguáicha data-bs-animation="{value}". Ejesareko emoambue hag̃ua káso tipo opción réra “ camelCase ”-gui “ kebab-case ”-pe embohasávo umi opción atributo de datos rupive. Por ehémplo, eipuru data-bs-custom-class="beautifier"rangue data-bs-customClass="beautifier".

Bootstrap 5.2.0 guive, opaite componente oipytyvõ peteĩ atributo dato reservado experimentaldata-bs-config ikatúva oñemohenda componente configuración simple peteĩ cadena JSON ramo. Peteĩ elemento oguerekóramo data-bs-config='{"delay":0, "title":123}'ha data-bs-title="456"atributo, pe valor paha titlehaꞌeta 456ha umi atributo dato rehegua añónte omboykéta umi valor oñemeꞌevaꞌekue data-bs-config. Avei, umi atributo dato rehegua oĩmava ikatu oguereko JSON mbaꞌekuaarã data-bs-delay='{"show":0,"hide":150}'.

Téra	Hesegua	Upevakuére	Techaukaha
`rootMargin`	sã	`0px 0px -25%`	Intersección Observer rootMargin unidades válidas, oñecalcula jave posición desplazamiento rehegua.
`smoothScroll`	booleano rehegua	`false`	Ombohapéva desplazamiento suave peteĩ puruhára oity jave peteĩ enlace oñe’ẽva ScrollSpy observables rehe.
`target`	cadena, elemento DOM rehegua	`null`	Omombeꞌu elemento ojepuru hag̃ua Scrollspy plugin.
`threshold`	matriz rehegua	`[0.1, 0.5, 1]`	`IntersectionObserver` umbral entrada válida, oñecalcula jave posición desplazamiento rehegua.

Opciones ndojeporúiva

v5.1.3 peve roipuruva’ekue offset& methodopciones, ko’áĝa ndojepuruvéimava ha oñemyengoviáva rootMargin. Ñañongatu hag̃ua joaju tapykue gotyo, jasegíta ñahesa’ỹijo peteĩ oñeme’ẽva offset, rootMarginha katu ko mba’ekuaarã ojeipe’áta v6 -pe .

Método-kuéra rehegua

Tapereko	Techaukaha
`dispose`	Ohundi peteĩ elemento scrollspy. (Oipeꞌa umi dato oñeñongatúva elemento DOM-pe)
`getInstance`	Método estático ojehupyty hag̃ua instancia scrollspy ojoajúva peteĩ elemento DOM rehe.
`getOrCreateInstance`	Método estático ojehupyty hag̃ua instancia scrollspy ojoajúva peteĩ elemento DOM ndive, térã ojejapo hag̃ua peteĩ pyahu en caso noñemoñepyrũi.
`refresh`	Oñemoĩ térã ojeipeꞌa jave elemento DOM-pe, tekotevẽta oñehenói método ñembopyahu rehegua.

Ko’ápe oĩ peteĩ techapyrã ojeporúvo método refresco:

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

Umi mba’e oikóva

Jeguerohyha	Techaukaha
`activate.bs.scrollspy`	Ko mbaꞌe ojehúva odispara elemento desplazamiento rehe oñemboguata jave peteĩ ancla scrollspy rupive.

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

Scrollspy rehegua

Mba’éichapa omba’apo

Tembiecharã

Navbar rehegua

Peteĩha rubro

Mokõiha rubro

Mbohapyha vore

Irundyha vore

Pokõiha rubro

Anidado nav rehegua

Artículo 1 rehegua

Artículo 1-1 rehegua

Artículo 1-2 rehegua

Artículo 2 rehegua

Artículo 3 rehegua

Artículo 3-1 rehegua

Artículo 3-2 rehegua

Aty lista rehegua

Artículo 1 rehegua

Artículo 2 rehegua

Artículo 3 rehegua

Artículo 4 rehegua

Anclaje simple rehegua

Artículo 1 rehegua

Artículo 2 rehegua

Artículo 3 rehegua

Artículo 4 rehegua

Artículo 5 rehegua

Umi elemento ndojehecháiva

Jeporu rehegua

Umi atributo de datos rupive

JavaScript rupive

Opciones rehegua

Método-kuéra rehegua

Umi mba’e oikóva