in English

Scrollspy

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

Дар ин саҳифа

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

Scrollspy барои дуруст кор кардан чанд талабот дорад:

Он бояд дар як ҷузъи nav Bootstrap ё гурӯҳи рӯйхат истифода шавад.
Scrollspy position: relative;элементеро, ки шумо ҷосусӣ мекунед, талаб мекунад, одатан <body>.
Лангарҳо ( <a>) лозиманд ва бояд ба унсуре бо он ишора idкунанд.

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

Контейнерҳои ҳаракаткунанда ва дастрасии клавиатура

Агар шумо як контейнери ҳаракаткунанда созед (ба ғайр аз <body>), боварӣ ҳосил кунед, ки heightмаҷмӯа дошта бошед ва overflow-y: scroll;ба он татбиқ кунед - дар баробари a 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>

Мисол бо навсозии лона

Scrollspy инчунин бо .navs nested кор мекунад. Агар лона .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>

Истифода

Тавассути атрибутҳои маълумот

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

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

Пас аз илова кардани position: relative;CSS-и худ, ба scrollspy тавассути JavaScript занг занед:

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

Ҳадафҳои ҳалшавандаи ID талаб карда мешаванд

Истинодҳои навбар бояд ҳадафҳои ҳалшавандаи ID дошта бошанд. Масалан, <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()
})

ихтиёр кардан

scrollspy элементро нест мекунад. (Маълумоти захирашударо дар элементи DOM нест мекунад)

гирифтани Instance

Усули статикӣ , ки ба шумо имкон медиҳад, ки мисоли scrollspy бо унсури DOM алоқамандро ба даст оред

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

getOrCreateInstance

Усули статикӣ , ки ба шумо имкон медиҳад, ки мисоли scrollspy-ро бо унсури 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`	сатр	`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

Ҳадафҳои ҳалшавандаи ID талаб карда мешаванд

Унсурҳои ҳадафи намоён нодида гирифта шуданд

Усулҳо

тароват кардан

ихтиёр кардан

гирифтани Instance

getOrCreateInstance

Имконот

Ҳодисаҳо