Scrollspy

Навигатсияи Bootstrap ё ҷузъҳои гурӯҳиро дар асоси мавқеъи ҳаракат ба таври худкор навсозӣ кунед, то нишон диҳед, ки кадом истинод дар айни замон дар порти намоиш фаъол аст.

Дар ин саҳифа

Он чӣ гуна кор мекунад

Scrollspy .activeсинфро дар унсурҳои лангар ( <a>) иваз мекунад, вақте ки унсури бо idлангар hrefистинодшуда ба намуди намоиш ҳаракат мекунад. Scrollspy беҳтарин дар якҷоягӣ бо ҷузъҳои nav Bootstrap ё гурӯҳи рӯйхат истифода мешавад , аммо он инчунин бо ҳама гуна унсурҳои лангари саҳифаи ҷорӣ кор мекунад. Ана ин тавр кор мекунад.

Барои оғоз кардан, scrollspy ду чизро талаб мекунад: паймоиш, гурӯҳи рӯйхат ё маҷмӯи оддии истинодҳо, инчунин як контейнери ҳаракатшаванда. Контейнери ҳаракатшаванда метавонад <body>унсури фармоишӣ бо маҷмӯи heightва overflow-y: scroll.
Дар контейнери ҳаракатшаванда илова кунед data-bs-spy="scroll"ва data-bs-target="#navId"дар куҷо navIdбеназири idпаймоиши алоқаманд аст. Боварӣ ҳосил кунед, ки инчунин tabindex="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 nested кор мекунад. Агар лона .navбошад .active, падару модараш низ хоҳанд буд .active. Майдони паҳлӯи навбарро ҳаракат кунед ва тағирёбии синфи фаъолро тамошо кунед.

Банди 1

Дар хотир доред, ки плагини JavaScript кӯшиш мекунад, ки унсури дурустро аз байни ҳама чизҳои намоён интихоб кунад. Якчанд ҳадафҳои намоёни scrollspy дар як вақт метавонад боиси баъзе мушкилот гардад.

Банди 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()
  })
})

Истифода

Тавассути атрибутҳои додаҳо

Барои ба осонӣ илова кардани рафтори scrollspy ба новбари болоии худ, data-bs-spy="scroll"ба унсуре, ки мехоҳед ҷосусӣ кунед, илова кунед (аксаран ин <body>). Сипас data-bs-targetатрибутро бо idноми синфи ё унсури волидайни ягон .navҷузъи Bootstrap илова кунед.

<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, ҳама ҷузъҳо атрибутҳои таҷрибавии ҳифзшударо дастгирӣ мекунанд data-bs-config, ки метавонад конфигуратсияи ҷузъҳои оддиро ҳамчун сатри JSON ҷойгир кунад. Вақте ки элемент дорои 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%`	Воҳидҳои эътибори Resection Observer rootMargin , ҳангоми ҳисоб кардани мавқеи ҳаракат.
`smoothScroll`	булӣ	`false`	Вақте ки корбар истинодеро, ки ба мушоҳидашавандаҳои ScrollSpy дахл дорад, клик мекунад, ҳаракати ҳамворро фаъол мекунад.
`target`	сатр, унсури DOM	`null`	Элементро барои татбиқи плагини Scrollspy муайян мекунад.
`threshold`	массив	`[0.1, 0.5, 1]`	`IntersectionObserver` ҳадди вуруди дуруст ҳангоми ҳисоб кардани мавқеи ҳаракат.

Имконоти бекоршуда

То v5.1.3 мо offset& опсияҳоро истифода мебурдем method, ки ҳоло фарсуда шудаанд ва бо rootMargin. Барои нигоҳ доштани мутобиқати ақиб, мо таҳлили додашударо offsetба -ро идома медиҳем, аммо ин хусусият дар v6rootMargin хориҷ карда мешавад .

Усулҳо

Усул	Тавсифи
`dispose`	scrollspy элементро нест мекунад. (Маълумоти захирашударо дар элементи DOM нест мекунад)
`getInstance`	Усули статикӣ барои гирифтани мисоли scrollspy, ки бо унсури DOM алоқаманд аст.
`getOrCreateInstance`	Усули статикӣ барои ба даст овардани мисоли scrollspy, ки бо унсури DOM алоқаманд аст ё эҷоди наве, ки агар он оғоз нашуда бошад.
`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...
})

Scrollspy

Он чӣ гуна кор мекунад

Мисолхо

Навбар

Сарлавҳаи аввал

Сарлавҳаи дуюм

Сарлавҳаи сеюм

Сарлавҳаи чорум

Сарлавҳаи панҷум

Навъи ҷойгиршуда

Банди 1

Банди 1-1

Банди 1-2

Банди 2

Банди 3

Банди 3-1

Банди 3-2

Рӯйхати гурӯҳ

Банди 1

Банди 2

Банди 3

Банди 4

Лангарҳои оддӣ

Банди 1

Банди 2

Банди 3

Банди 4

Банди 5

Унсурҳои нонамоён

Истифода

Тавассути атрибутҳои додаҳо

Тавассути JavaScript

Имконот

Усулҳо

Ҳодисаҳо