Scrollspy

Жүктөөчү навигацияны автоматтык түрдө жаңыртыңыз же сыдырма позициясына негизделген топтун компоненттерин тизмектеп, учурда көрүү терезесинде кайсы шилтеме активдүү экенин көрсөтүңүз.

Бул бетте

Бул кантип иштейт

Scrollspy туура иштеши үчүн бир нече талаптарга ээ:

Ал Bootstrap nav компонентинде же тизме тобунда колдонулушу керек .
Scrollspy position: relative;сиз шпион кылып жаткан элементти талап кылат, адатта <body>.
Анкерлер ( <a>) талап кылынат жана аны менен элементти көрсөтүшү керек id.

Ийгиликтүү ишке ашырылгандан кийин, навигацияңыз же тизме тобуңуз ошого жараша жаңыланып, .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>

Кыстарылган навигация менен мисал

Scrollspy ошондой эле уячалар менен иштейт .nav. Эгерде уя .navболсо .active, анын ата-энеси да болот .active. Navbar жанындагы аймакты сыдырып, класстын активдүү өзгөрүшүн көрүңүз.

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>). Андан кийин атрибутту каалаган Bootstrap компонентинин data-bs-targetнегизги элементинин ID же классы менен кошуңуз ..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'
})

Чечилүүчү ID максаттары талап кылынат

Navbar шилтемелеринде чечилүүчү ID максаттары болушу керек. Мисалы, <a href="#home">home</a>DOMдагы бир нерсеге дал келиши керек <div id="home"></div>.

Көрүнбөгөн максаттуу элементтер этибарга алынбайт

Көрүнбөгөн максаттуу элементтер этибарга алынбайт жана алардын тиешелүү навигация элементтери эч качан баса белгиленбейт.

Методдор

жаңылоо

DOMдан элементтерди кошуу же алып салуу менен бирге scrollspy колдонуп жатканда, сиз жаңылоо ыкмасын төмөнкүдөй чакырышыңыз керек:

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

тескөө

Элементтин жылдыргычын жок кылат. (DOM элементинде сакталган маалыматтарды жок кылат)

getInstance

DOM элементи менен байланышкан scrollspy инстанциясын алууга мүмкүндүк берген статикалык ыкма

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

getOrCreateInstance

DOM элементи менен байланышкан scrollspy инстанциясын алууга же ал инициализацияланбаган учурда жаңысын түзүүгө мүмкүндүк берген статикалык ыкма

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

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-bs-, сыяктуу эле кошуңуз data-bs-offset="".

аты	Type	Демейки	Description
`offset`	саны	`10`	Сыдыруунун ордун эсептөөдө жогорудан жылыш үчүн пикселдер.
`method`	сап	`auto`	Чалгындалган элемент кайсы бөлүмдө экенин табат. `auto`Жылдыруу координаттарын алуу үчүн эң жакшы ыкманы тандайт. жылдыруу координаттарын алуу үчүн ыкманы `offset`колдонот . жылдыруу координаттарын алуу үчүн жана касиеттерин колдонот .`Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft`
`target`	string \| jQuery объекти \| DOM элементи		Scrollspy плагинди колдонуу үчүн элементти белгилейт.

Окуялар

Окуя түрү	Description
`activate.bs.scrollspy`	Бул окуя жылдыруу элементинде жаңы нерсе scrollspy тарабынан активдештирилген сайын күйөт.

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

Scrollspy

Бул кантип иштейт

Жылдырылуучу контейнерлер жана клавиатура мүмкүнчүлүгү

Navbarдагы мисал

Биринчи рубрика

Экинчи рубрика

Үчүнчү рубрика

Төртүнчү рубрика

Бешинчи рубрика

Кыстарылган навигация менен мисал

1-пункт

1-1-пункт

1-2-пункт

2-пункт

3-пункт

3-1-пункт

3-2-пункт

Тизме тобу менен мисал

1-пункт

2-пункт

3-пункт

4-пункт

Колдонуу

Маалымат атрибуттары аркылуу

JavaScript аркылуу

Чечилүүчү ID максаттары талап кылынат

Көрүнбөгөн максаттуу элементтер этибарга алынбайт

Методдор

жаңылоо

тескөө

getInstance

getOrCreateInstance

Параметрлер

Окуялар