Scrollspy

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

Бұл бетте

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

Анкерлік сілтемесі бар элемент көрініске айналдырылған кезде, Scrollspy .activeанкерлік ( ) элементтеріндегі сыныпты ауыстырады . Scrollspy ең жақсы Bootstrap navigation компонентімен немесе тізім тобымен бірге пайдаланылады , бірақ ол ағымдағы беттегі кез келген анкерлік элементтермен де жұмыс істейді. Бұл қалай жұмыс істейді.<a>idhref

Бастау үшін scrollspy екі нәрсені қажет етеді: шарлау, тізім тобы немесе қарапайым сілтемелер жинағы, сонымен қатар айналдырылатын контейнер. Жылжытылатын контейнер және <body>жиыны бар теңшелетін элемент болуы мүмкін .heightoverflow-y: scroll
Жылжытылатын контейнерде байланыстырылған шарлаудың бірегейін қосыңыз data-bs-spy="scroll"және data-bs-target="#navId"қай жерде . Сондай-ақ пернетақтаға кіруді қамтамасыз ету үшін қосуды ұмытпаңыз .navIdidtabindex="0"
«Тыңдаған» контейнерді айналдырған кезде, .activeкласс байланысты навигациядағы якорь сілтемелерінен қосылады және жойылады. Сілтемелерде шешілетін мақсаттар болуы керек id, әйтпесе олар еленбейді. Мысалы, <a href="#home">home</a>міндетті түрде DOM ішіндегі бір нәрсеге сәйкес келеді<div id="home"></div>
Көрінбейтін мақсатты элементтер еленбейді. Төмендегі « Көрінбейтін элементтер » бөлімін қараңыз.

Мысалдар

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

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

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

Екінші айдар

Үшінші айдар

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

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

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

Кірістірілген шарлау

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

1-тармақ

JavaScript плагині көрінетін барлық элементтердің ішінен дұрыс элементті таңдауға тырысатынын есте сақтаңыз. Бір уақытта бірнеше көрінетін айналдыру нысандары кейбір мәселелерді тудыруы мүмкін.

1-1-тармақ

1-2-тармақ

2-тармақ

3-тармақ

3-1-тармақ

3-2-тармақ

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

Тізім тобы

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

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

1-тармақ

2-тармақ

3-тармақ

4-тармақ

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

Қарапайым анкерлер

Scrollspy шарлау құрамдастары мен тізім топтарымен шектелмейді, сондықтан ол <a>ағымдағы құжаттағы кез келген анкерлік элементтерде жұмыс істейді. Аймақты айналдырып, .activeсыныптың өзгеруін қараңыз.

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

1-тармақ

2-тармақ

3-тармақ

4-тармақ

5-тармақ

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

Көрінбейтін элементтер

Көрінбейтін мақсатты элементтер еленбейді және олардың сәйкес шарлау элементтері .activeсыныпты алмайды. Көрінбейтін қаптамада инициализацияланған Scrollspy даналары барлық мақсатты элементтерді елемейді. refreshҚаптама көрінгеннен кейін бақыланатын элементтерді тексеру үшін әдісті пайдаланыңыз .

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()
  })
})

Қолданылуы

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

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

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

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

Опциялар

Опциялар деректер атрибуттары немесе JavaScript арқылы берілуі мүмкін болғандықтан, параметр атауын data-bs-сияқты қосуға болады data-bs-animation="{value}". Опцияларды деректер атрибуттары арқылы өткізген кезде опция атауының регистр түрін “ camelCase ” дан “ kebab-case ” түріне өзгертуді ұмытпаңыз. Мысалы, data-bs-custom-class="beautifier"орнына пайдаланыңыз data-bs-customClass="beautifier".

Bootstrap 5.2.0 нұсқасы бойынша барлық компоненттер қарапайым құрамдас конфигурациясын JSON жолы ретінде орналастыра алатын эксперименттік сақталған деректер төлсипатын қолдайды. data-bs-configЭлементте data-bs-config='{"delay":0, "title":123}'және data-bs-title="456"атрибуттары болғанда, соңғы titleмән болады 456және бөлек деректер атрибуттары параметрінде берілген мәндерді қайта анықтайды data-bs-config. Бұған қоса, бар деректер атрибуттары сияқты JSON мәндерін орналастыра алады data-bs-delay='{"show":0,"hide":150}'.

Аты	Түр	Әдепкі	Сипаттама
`rootMargin`	жол	`0px 0px -25%`	Айналдыру орнын есептегенде, Intersection Observer rootMargin жарамды бірліктері.
`smoothScroll`	логикалық	`false`	Пайдаланушы ScrollSpy бақыланатындарға сілтеме жасайтын сілтемені басқан кезде тегіс айналдыруды қосады.
`target`	жол, DOM элементі	`null`	Scrollspy плагинін қолдану үшін элементті көрсетеді.
`threshold`	массив	`[0.1, 0.5, 1]`	`IntersectionObserver` айналдыру орнын есептеу кезінде жарамды кіріс шегі .

Ескірген опциялар

5.1.3 нұсқасына дейін біз offset& methodопцияларын қолдандық, олар қазір ескірген және ауыстырылды rootMargin. Кері үйлесімділікті сақтау үшін берілген параметрді талдауды жалғастырамыз offset, бірақ бұл мүмкіндік v6rootMargin ішінде жойылады .

Әдістері

Әдіс	Сипаттама
`dispose`	Элементтің айналдыруын бұзады. (DOM элементінде сақталған деректерді жояды)
`getInstance`	DOM элементімен байланыстырылған scrollspy данасын алудың статикалық әдісі.
`getOrCreateInstance`	DOM элементімен байланыстырылған scrollspy данасын алуға немесе инициализацияланбаған жағдайда жаңасын жасауға арналған статикалық әдіс.
`refresh`	DOM ішіндегі элементтерді қосқанда немесе алып тастағанда, жаңарту әдісін шақыру керек.

Жаңарту әдісін қолданатын мысал:

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

Оқиғалар

Оқиға	Сипаттама
`activate.bs.scrollspy`	Бұл оқиға айналдыру элементінде зәкір scrollspy арқылы белсендірілген сайын іске қосылады.

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