Негізгі мазмұнға өту Құжаттар шарлауына өту
in English

Scrollspy

Көру портында қай сілтеме қазір белсенді екенін көрсету үшін айналдыру орнына негізделген Bootstrap шарлауын немесе тізім тобының құрамдастарын автоматты түрде жаңартыңыз.

Бұл қалай жұмыс істейді

Scrollspy дұрыс жұмыс істеуі үшін бірнеше талаптарға ие:

  • Ол Bootstrap nav компонентінде немесе тізімдер тобында қолданылуы керек .
  • Scrollspy position: relative;сіз тыңшылық жасап жатқан элементті талап етеді, әдетте <body>.
  • Анкерлер ( <a>) қажет және онымен элементті көрсетуі керек id.

Сәтті орындалғанда, навигация немесе тізім тобы сәйкесінше жаңартылып, .activeолардың байланысты мақсаттары негізінде сыныпты бір элементтен келесіге жылжытады.

Жылжымалы контейнерлер және пернетақтаға қол жеткізу

Егер сіз айналдыратын контейнер жасап жатсаңыз (-дан басқа <body>), пернетақтаға қол жеткізуді қамтамасыз ету үшін heightжиынтықты және overflow-y: scroll;оған қолданылатынды ұмытпаңыз.tabindex="0"

Шарлау тақтасындағы мысал

Шарлау тақтасының астындағы аймақты айналдырыңыз және белсенді сыныптың өзгеруін қараңыз. Ашылмалы элементтер де бөлектеледі.

Бірінші айдар

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

Екінші айдар

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

Үшінші айдар

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

Төртінші айдар

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

Бесінші айдар

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

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

Кірістірілген навигациясы бар мысал

Scrollspy сонымен қатар кірістірілген .navs-мен жұмыс істейді. Ұя .navболса .active, оның ата-анасы да болады .active. Шарлау тақтасының жанындағы аймақты айналдырыңыз және белсенді сыныптың өзгеруін қараңыз.

1-тармақ

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

1-1-тармақ

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

1-2-тармақ

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

2-тармақ

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

3-тармақ

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

3-1-тармақ

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

3-2-тармақ

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

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

Тізім тобы бар мысал

Scrollspy .list-groups-мен де жұмыс істейді. Тізім тобының жанындағы аймақты айналдырыңыз және белсенді сыныптың өзгеруін қараңыз.

1-тармақ

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

2-тармақ

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

3-тармақ

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

4-тармақ

Бұл scrollspy бетіне арналған толтырғыш мазмұны. Бетті төмен айналдырған кезде сәйкес шарлау сілтемесі бөлектелетінін ескеріңіз. Ол бүкіл құрамдас мысалда қайталанады. Айналдыру мен бөлектеуді ерекшелеу үшін осы жерге тағы бірнеше мысал көшірмелерін қосуды жалғастырамыз.

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

Қолданылуы

Деректер атрибуттары арқылы

Үстіңгі тақтадағы шарлауға айналдыру әрекетін оңай қосу data-bs-spy="scroll"үшін, шпиондық жасағыңыз келетін элементке қосыңыз (көбінесе бұл <body>). Содан кейін кез келген Bootstrap компонентінің data-bs-targetнегізгі элементінің идентификаторы немесе сыныбы бар төлсипатты қосыңыз..nav

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 арқылы

CSS-ті қосқаннан кейін position: relative;JavaScript арқылы scrollspy-ге қоңырау шалыңыз:

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

Шешілетін идентификатор мақсаттары қажет

Шарлау тақтасының сілтемелерінде шешілетін идентификатор мақсаттары болуы керек. Мысалы, <a href="#home">home</a>міндетті түрде DOM ішіндегі нәрсеге сәйкес келеді <div id="home"></div>.

Көрінбейтін мақсатты элементтер еленбейді

Көрінбейтін мақсатты элементтер еленбейді және олардың сәйкес шарлау элементтері ешқашан бөлектелмейді.

Әдістері

жаңарту

Scrollspy қолданбасын DOM ішінен элементтерді қосу немесе жоюмен бірге пайдаланған кезде, жаңарту әдісін келесідей шақыру керек:

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

кәдеге жарату

Элементтің айналдыруын бұзады. (DOM элементінде сақталған деректерді жояды)

getInstance

DOM элементімен байланыстырылған scrollspy данасын алуға мүмкіндік беретін статикалық әдіс

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

getOrCreateInstance

DOM элементімен байланыстырылған scrollspy данасын алуға немесе инициализацияланбаған жағдайда жаңасын жасауға мүмкіндік беретін статикалық әдіс

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

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-bs-сияқты қосыңыз data-bs-offset="".

Аты Түр Әдепкі Сипаттама
offset саны 10 Айналдыру орнын есептеу кезінде жоғарыдан ығысу үшін пикселдер.
method жол auto Тыңдалған элемент қай бөлімде екенін табады. autoАйналдыру координаттарын алудың ең жақсы әдісін таңдайды. айналдыру координаттарын алу offsetүшін әдісті пайдаланады . айналдыру координаттарын алу үшін және сипаттарын пайдаланады .Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft
target жол | jQuery нысаны | DOM элементі Scrollspy плагинін қолдану үшін элементті көрсетеді.

Оқиғалар

Оқиға түрі Сипаттама
activate.bs.scrollspy Жаңа элемент scrollspy арқылы белсендірілген сайын бұл оқиға айналдыру элементінде іске қосылады.
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})