Scrollspy

Bootstrap يولباشچىسى ياكى تىزىملىك گۇرۇپپىسىنىڭ زاپچاسلىرىنى سىيرىلما ئورۇنغا ئاساسەن ئاپتوماتىك يېڭىلاپ ، كۆرۈنۈشتە قايسى ئۇلىنىشنىڭ ئاكتىپ ئىكەنلىكىنى كۆرسىتىپ بېرىدۇ.

بۇ بەتتە

قانداق ئىشلەيدۇ

Scrollspy لەڭگەر .active( <a>) ئېلېمېنتلىرى idئۈستىدىكى دەرسلىكنى ئالماشتۇرغاندا ، لەڭگەر پايدىلانغان ئېلېمېنت كۆزگە كۆرۈنگەندە href. Scrollspy ئەڭ ياخشىسى Bootstrap nav زاپچاسلىرى ياكى تىزىملىك گۇرۇپپىسى بىلەن بىرلەشتۈرۈپ ئىشلىتىلىدۇ ، ئەمما ئۇ نۆۋەتتىكى بەتتىكى لەڭگەر ئېلېمېنتلىرى بىلەنمۇ ئىشلەيدۇ. بۇ ئۇنىڭ قانداق ئىشلەيدىغانلىقى.

باشلاش ئۈچۈن ، سىيرىلما يول باشلاش ، تىزىملىك گۇرۇپپىسى ياكى ئاددىي ئۇلىنىشتىن ئىبارەت ئىككى نەرسىنى تەلەپ قىلىدۇ. سىيرىلغىلى بولىدىغان قاچا <body>بىر يۈرۈش ياكى خاسلاشتۇرۇلغان ئېلېمېنت heightبولالايدۇ overflow-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>

Nested nav

Scrollspy ئۇۋىسى .navs بىلەنمۇ ئىشلەيدۇ. ئەگەر ئۇۋىسى .navبولسا .active، ئۇنىڭ ئاتا-ئانىسىمۇ بولىدۇ .active. يولباشچى يېنىدىكى رايوننى سىيرىپ ئاكتىپ سىنىپ ئۆزگىرىشىنى كۆرۈڭ.

1-تۈر

ئېسىڭىزدە بولسۇنكى ، JavaScript قىستۇرمىسى بارلىق كۆرۈنۈشلەر ئارىسىدا مۇۋاپىق ئېلېمېنتنى تاللاشقا تىرىشىدۇ. بىرلا ۋاقىتتا كۆپ كۆرۈلىدىغان سىيرىلما نىشان بەزى مەسىلىلەرنى كەلتۈرۈپ چىقىرىشى مۇمكىن.

Item 1-1

1-2-تۈر

2-تۈر

3-تۈر

Item 3-1

Item 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 پەقەت nav زاپچاسلىرى ۋە تىزىملىك گۇرۇپپىلىرى بىلەنلا چەكلەنمەيدۇ ، شۇڭا ئۇ <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}". تاللاش خاسلىقى ئارقىلىق تاللاش نامىنى «تۆگە دېلوسى» دىن «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`	string	`0px 0px -25%`	كېسىشمە كۆزەتكۈچى rootMargin ئىناۋەتلىك ئورۇنلار ، دومىلاش ئورنىنى ھېسابلىغاندا.
`smoothScroll`	boolean	`false`	ئىشلەتكۈچى ScrollSpy كۆزەتكۈچىنى كۆرسىتىدۇ.
`target`	string, DOM element	`null`	Scrollspy قىستۇرمىسىنى ئىشلىتىدىغان ئېلېمېنتنى بەلگىلەيدۇ.
`threshold`	سانلار گۇرپىسى	`[0.1, 0.5, 1]`	`IntersectionObserver` چەكمە ئىناۋەتلىك كىرگۈزۈش ، دومىلاش ئورنىنى ھېسابلىغاندا.

ۋاقتى ئۆتكەن تاللاشلار

V5.1.3 گىچە بىز ئىشلىتىۋاتقان offsetۋە methodتاللانمىلارنى ئىشلىتىۋاتىمىز ، بۇلار ھازىر ۋاقتى ئۆتكەن ۋە ئۇنىڭ ئورنىنى ئالىدۇ rootMargin. قالاق ماسلىشىشنى ساقلاش ئۈچۈن ، بىز بېرىلگەننى داۋاملىق تەھلىل offsetقىلىمىز ، ئەمما بۇ ئىقتىدار v6rootMargin دا ئۆچۈرۈلىدۇ .

Methods

ئۇسۇل	چۈشەندۈرۈش
`dispose`	بىر ئېلېمېنتنىڭ سىيرىلمىسىنى يوقىتىدۇ. (DOM ئېلېمېنتىدىكى ساقلانغان سانلىق مەلۇماتلارنى ئۆچۈرۈۋېتىدۇ)
`getInstance`	تۇراقلىق ئۇسۇل DOM ئېلېمېنتى بىلەن باغلانغان ئۆرنەك مىسالىغا ئېرىشىش.
`getOrCreateInstance`	تۇراقلىق ئۇسۇل DOM ئېلېمېنتى بىلەن باغلىنىشلىق ئۆرنەك مىسالىغا ئېرىشىش ياكى دەسلەپكى قەدەمدە يېڭىلانمىغان ئەھۋال ئاستىدا يېڭى ئۇسۇل قۇرۇش.
`refresh`	DOM دىكى ئېلېمېنتلارنى قوشقاندا ياكى ئۆچۈرگەندە ، يېڭىلاش ئۇسۇلىنى چاقىرىشىڭىز كېرەك.

يېڭىلاش ئۇسۇلىنى قوللانغان بىر مىسال:

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

Events

Event	چۈشەندۈرۈش
`activate.bs.scrollspy`	بۇ ھادىسە سىيرىلغۇچ ئارقىلىق لەڭگەر قوزغىتىلغان ھامان دومىلىما ئېلېمېنتىغا ئوت قويىدۇ.

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