Lewati ke konten utama Lewati ke navigasi dokumen
in English

Scrollspy

Perbarui navigasi Bootstrap atau daftar komponen grup secara otomatis berdasarkan posisi gulir untuk menunjukkan tautan mana yang saat ini aktif di viewport.

Di halaman ini

Bagaimana itu bekerja

Scrollspy memiliki beberapa persyaratan untuk berfungsi dengan baik:

  • Itu harus digunakan pada komponen Bootstrap nav atau grup daftar .
  • Scrollspy membutuhkan position: relative;elemen yang Anda mata-matai, biasanya <body>.
  • Jangkar ( <a>) diperlukan dan harus menunjuk ke elemen dengan itu id.

Ketika berhasil diterapkan, nav atau grup daftar Anda akan diperbarui sesuai dengan itu, memindahkan .activekelas dari satu item ke item berikutnya berdasarkan target yang terkait.

Wadah yang dapat digulir dan akses keyboard

Jika Anda membuat wadah yang dapat digulir (selain <body>), pastikan untuk memiliki satu heightset dan overflow-y: scroll;menerapkannya—di samping a tabindex="0"untuk memastikan akses keyboard.

Contoh di navbar

Gulir area di bawah bilah navigasi dan perhatikan perubahan kelas yang aktif. Item dropdown juga akan disorot.

Judul pertama

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Judul kedua

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Judul ketiga

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Judul keempat

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Judul kelima

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

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

Contoh dengan navigasi bersarang

Scrollspy juga berfungsi dengan .navs bersarang. Jika bersarang .navadalah .active, orang tuanya juga akan .active. Gulir area di sebelah navbar dan perhatikan perubahan kelas yang aktif.

Barang 1

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Butir 1-1

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Butir 1-2

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Butir 2

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Butir 3

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Butir 3-1

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Butir 3-2

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

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

Contoh dengan grup daftar

Scrollspy juga bekerja dengan .list-groups. Gulir area di sebelah grup daftar dan perhatikan perubahan kelas yang aktif.

Barang 1

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Butir 2

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Butir 3

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Butir 4

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

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

Penggunaan

Melalui atribut data

Untuk dengan mudah menambahkan perilaku scrollspy ke navigasi bilah atas Anda, tambahkan data-bs-spy="scroll"ke elemen yang ingin Anda mata-matai (biasanya ini adalah <body>). Kemudian tambahkan data-bs-targetatribut dengan ID atau kelas elemen induk dari setiap .navkomponen 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>

Melalui JavaScript

Setelah menambahkan position: relative;CSS Anda, panggil scrollspy melalui JavaScript:

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

Target ID yang dapat diselesaikan diperlukan

Tautan Navbar harus memiliki target id yang dapat diselesaikan. Misalnya, a <a href="#home">home</a>harus sesuai dengan sesuatu di DOM seperti <div id="home"></div>.

Elemen target yang tidak terlihat diabaikan

Elemen target yang tidak terlihat akan diabaikan dan item navigasi terkaitnya tidak akan pernah disorot.

Metode

menyegarkan

Saat menggunakan scrollspy bersamaan dengan menambahkan atau menghapus elemen dari DOM, Anda harus memanggil metode penyegaran seperti:

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

dispose

Destroys an element’s scrollspy. (Removes stored data on the DOM element)

getInstance

Static method which allows you to get the scrollspy instance associated with a DOM element

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

getOrCreateInstance

Static method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn’t initialised

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-offset="".

Name Type Default Description
offset number 10 Pixels to offset from top when calculating position of scroll.
method string auto Finds which section the spied element is in. auto will choose the best method to get scroll coordinates. offset will use the Element.getBoundingClientRect() method to get scroll coordinates. position will use the HTMLElement.offsetTop and HTMLElement.offsetLeft properties to get scroll coordinates.
target string | jQuery object | DOM element Specifies element to apply Scrollspy plugin.

Events

Event type Description
activate.bs.scrollspy This event fires on the scroll element whenever a new item becomes activated by the scrollspy. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})