Scrollspy

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

بۇ بەتتە

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

Scrollspy نىڭ نورمال ئىشلەش ئۈچۈن بىر قانچە تەلىپى بار:

ئۇ چوقۇم Bootstrap nav زاپچاسلىرى ياكى تىزىملىك گۇرۇپپىسىدا ئىشلىتىلىشى كېرەك.
Scrollspy position: relative;سىز جاسۇسلۇق قىلىۋاتقان ئېلېمېنتنى تەلەپ قىلىدۇ <body>.
لەڭگەر ( <a>) تەلەپ قىلىنىدۇ ۋە چوقۇم بۇنىڭ بىلەن بىر ئېلېمېنتنى كۆرسىتىشى idكېرەك.

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

سىيرىلغىلى بولىدىغان قاچا ۋە كۇنۇپكا تاختىسى

ئەگەر سىيرىلغىلى بولىدىغان قاچا (ئۇنىڭدىن باشقا <body>) ياساۋاتقان بولسىڭىز ، چوقۇم بىر heightيۈرۈش بولۇشى ھەمدە overflow-y: scroll;ئۇنى قوللىنىشىڭىز كېرەك ، tabindex="0"كۇنۇپكا تاختىسىنىڭ زىيارەت قىلىنىشىغا كاپالەتلىك قىلىڭ.

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

بىرىنچى ماۋزۇ

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

ئۇۋىسى بولغان nav بىلەن مىسال

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

1-تۈر

Item 1-1

1-2-تۈر

2-تۈر

3-تۈر

Item 3-1

Item 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'
})

ھەل قىلىشقا بولىدىغان كىملىك نىشانلىرى تەلەپ قىلىنىدۇ

Navbar ئۇلىنىشىدا ھەل قىلغىلى بولىدىغان id نىشانلىرى بولۇشى كېرەك. مەسىلەن ، <a href="#home">home</a>چوقۇم DOM غا ئوخشاش نەرسىگە ماس كېلىشى كېرەك <div id="home"></div>.

كۆرۈنمەيدىغان نىشان ئېلېمېنتلىرى نەزەردىن ساقىت قىلىندى

كۆرۈنمەيدىغان نىشان ئېلېمېنتلىرى نەزەردىن ساقىت قىلىنىدۇ ۋە ئۇلارنىڭ ماس كېلىدىغان تۈرلىرى ھەرگىز گەۋدىلەنمەيدۇ.

Methods

يېڭىلاش

DOM دىكى ئېلېمېنتلارنى قوشۇش ياكى چىقىرىۋېتىش بىلەن بىللە scrollspy نى ئىشلەتكەندە ، يېڭىلاش ئۇسۇلىنى مۇنداق چاقىرىشىڭىز كېرەك:

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

بىر تەرەپ قىلىش

بىر ئېلېمېنتنىڭ سىيرىلمىسىنى يوقىتىدۇ. (DOM ئېلېمېنتىدىكى ساقلانغان سانلىق مەلۇماتلارنى ئۆچۈرۈۋېتىدۇ)

getInstance

تۇراقلىق ئۇسۇل ئارقىلىق DOM ئېلېمېنتى بىلەن مۇناسىۋەتلىك بولغان ئۆرنەك مىسالىغا ئېرىشەلەيسىز

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

getOrCreateInstance

تۇراقلىق ئۇسۇل ، سىز DOM ئېلېمېنتى بىلەن باغلانغان ئۆرنەك مىسالىغا ئېرىشەلەيسىز ياكى باشلانمىغان ئەھۋال ئاستىدا يېڭىسىنى قۇرالايسىز.

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`	string	`auto`	جاسۇسلۇق ئېلېمېنتىنىڭ قايسى بۆلەكتە ئىكەنلىكىنى ئىزدەيدۇ. `auto`سىيرىلما كوئوردېناتقا ئېرىشىشنىڭ ئەڭ ياخشى ئۇسۇلىنى تاللايدۇ. `offset`بۇ `Element.getBoundingClientRect()`ئۇسۇل ئارقىلىق سىيرىلما كوئوردېناتقا ئېرىشىدۇ. ۋە خاسلىقنى `position`ئىشلىتىپ سىيرىلما كوردىناتىغا ئېرىشىدۇ.`HTMLElement.offsetTopHTMLElement.offsetLeft`
`target`	string \| jQuery ئوبيېكتى \| DOM ئېلمىنتى		Scrollspy قىستۇرمىسىنى ئىشلىتىدىغان ئېلېمېنتنى بەلگىلەيدۇ.

Events

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

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

Scrollspy

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

سىيرىلغىلى بولىدىغان قاچا ۋە كۇنۇپكا تاختىسى

Navbar دىكى مىسال

بىرىنچى ماۋزۇ

ئىككىنچى ماۋزۇ

ئۈچىنچى ماۋزۇ

تۆتىنچى ماۋزۇ

بەشىنچى ماۋزۇ

ئۇۋىسى بولغان nav بىلەن مىسال

1-تۈر

Item 1-1

1-2-تۈر

2-تۈر

3-تۈر

Item 3-1

Item 3-2

تىزىملىك-گۇرۇپپا بىلەن مىسال

1-تۈر

2-تۈر

3-تۈر

4-تۈر

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

JavaScript ئارقىلىق

ھەل قىلىشقا بولىدىغان كىملىك ​​نىشانلىرى تەلەپ قىلىنىدۇ

كۆرۈنمەيدىغان نىشان ئېلېمېنتلىرى نەزەردىن ساقىت قىلىندى

Methods

يېڭىلاش

بىر تەرەپ قىلىش

getInstance

getOrCreateInstance

تاللانما

Events

ھەل قىلىشقا بولىدىغان كىملىك نىشانلىرى تەلەپ قىلىنىدۇ