Scrollspy

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

Бұл бетте

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

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

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

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

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

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

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

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

Бұл 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-тармақ

1-1-тармақ

1-2-тармақ

2-тармақ

3-тармақ

3-1-тармақ

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>

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

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

1-тармақ 2-тармақ 3-тармақ 4-тармақ

1-тармақ

2-тармақ

3-тармақ

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>

Қолданылуы

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

Үстіңгі тақтадағы шарлауға айналдыру әрекетін оңай қосу 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...
})

Scrollspy

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

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

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

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

Екінші айдар

Үшінші айдар

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

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

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

1-тармақ

1-1-тармақ

1-2-тармақ

2-тармақ

3-тармақ

3-1-тармақ

3-2-тармақ

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

1-тармақ

2-тармақ

3-тармақ

4-тармақ

Қолданылуы

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

JavaScript арқылы

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

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

Әдістері

жаңарту

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

getInstance

getOrCreateInstance

Опциялар

Оқиғалар