Desplazamiento

Actualice automáticamente la navegación de Bootstrap o enumere los componentes del grupo en función de la posición de desplazamiento para indicar qué enlace está actualmente activo en la ventana gráfica.

En esta página

Cómo funciona

Scrollspy tiene algunos requisitos para funcionar correctamente:

Debe usarse en un componente de navegación Bootstrap o en un grupo de listas .
Scrollspy requiere position: relative;el elemento que está espiando, generalmente el archivo <body>.
Los anclas ( <a>) son obligatorios y deben apuntar a un elemento con eso id.

Cuando se implemente con éxito, su grupo de navegación o lista se actualizará en consecuencia, moviendo la .activeclase de un elemento al siguiente en función de sus objetivos asociados.

Contenedores desplazables y acceso por teclado

Si está creando un contenedor desplazable (que no sea el <body>), asegúrese de tener un heightconjunto y overflow-y: scroll;aplicarlo, junto con un tabindex="0"para garantizar el acceso al teclado.

Desplácese por el área debajo de la barra de navegación y observe cómo cambia la clase activa. Los elementos desplegables también se resaltarán.

primer encabezado

Este es un contenido de marcador de posición para la página scrollspy. Tenga en cuenta que a medida que se desplaza hacia abajo en la página, se resalta el enlace de navegación correspondiente. Se repite en todo el ejemplo del componente. Seguimos agregando más copias de ejemplo aquí para enfatizar el desplazamiento y el resaltado.

Segundo encabezado

Tercer encabezado

Cuarto encabezado

Quinto encabezamiento

<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 navegación anidada

Scrollspy también funciona con correos electrónicos anidados .nav. Si anidado .naves .active, sus padres también lo serán .active. Desplácese por el área junto a la barra de navegación y observe cómo cambia la clase activa.

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

Ejemplo con grupo de lista

Scrollspy también funciona con .list-groups. Desplácese por el área junto al grupo de listas y observe cómo cambia la clase activa.

Objeto 1 Artículo 2 artículo 3 Artículo 4

Objeto 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

A través de atributos de datos

Para agregar fácilmente el comportamiento de scrollspy a la navegación de la barra superior, agregue data-bs-spy="scroll"el elemento que desea espiar (por lo general, este sería el <body>). Luego agregue el data-bs-targetatributo con el ID o la clase del elemento principal de cualquier .navcomponente de 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>

A través de JavaScript

Después de agregar position: relative;su CSS, llame a scrollspy a través de JavaScript:

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

Se requieren objetivos de ID resolubles

Los enlaces de la barra de navegación deben tener objetivos de identificación resolubles. Por ejemplo, <a href="#home">home</a>debe corresponder a algo en el DOM como <div id="home"></div>.

Elementos de destino no visibles ignorados

Los elementos de destino que no sean visibles se ignorarán y sus elementos de navegación correspondientes nunca se resaltarán.

Métodos

actualizar

Cuando use scrollspy junto con la adición o eliminación de elementos del DOM, deberá llamar al método de actualización de la siguiente manera:

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

disponer

Destruye el scrollspy de un elemento. (Elimina los datos almacenados en el elemento DOM)

obtener Instancia

Método estático que le permite obtener la instancia de scrollspy asociada con un elemento DOM

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

getOrCreateInstance

Método estático que le permite obtener la instancia de scrollspy asociada con un elemento DOM, o crear uno nuevo en caso de que no se haya inicializado

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

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-bs-, como en data-bs-offset="".

Nombre	Escribe	Defecto	Descripción
`offset`	número	`10`	Píxeles para compensar desde la parte superior al calcular la posición de desplazamiento.
`method`	cuerda	`auto`	Encuentra en qué sección se encuentra el elemento espiado. `auto`Elegirá el mejor método para obtener las coordenadas de desplazamiento. `offset`utilizará el `Element.getBoundingClientRect()`método para obtener las coordenadas de desplazamiento. `position`utilizará las propiedades `HTMLElement.offsetTop`y `HTMLElement.offsetLeft`para obtener las coordenadas de desplazamiento.
`target`	cadena \| objeto jQuery \| elemento DOM		Especifica el elemento para aplicar el complemento Scrollspy.

Eventos

Tipo de evento	Descripción
`activate.bs.scrollspy`	Este evento se activa en el elemento de desplazamiento cada vez que el scrollspy activa un nuevo elemento.

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

Desplazamiento

Cómo funciona

Contenedores desplazables y acceso por teclado

Ejemplo en la barra de navegación

primer encabezado

Segundo encabezado

Tercer encabezado

Cuarto encabezado

Quinto encabezamiento

Ejemplo con navegación anidada

Objeto 1

Artículo 1-1

Artículo 1-2

Artículo 2

artículo 3

Artículo 3-1

Artículo 3-2

Ejemplo con grupo de lista

Objeto 1

Artículo 2

artículo 3

Artículo 4

Uso

A través de atributos de datos

A través de JavaScript

Se requieren objetivos de ID resolubles

Elementos de destino no visibles ignorados

Métodos

actualizar

disponer

obtener Instancia

getOrCreateInstance

Opciones

Eventos