Scrollspy

Харах цонхонд аль холбоос идэвхтэй байгааг харуулахын тулд гүйлгэх байрлалд тулгуурлан Bootstrap навигацийг автоматаар шинэчлэх эсвэл бүлгийн бүрэлдэхүүн хэсгүүдийг жагсаах.

Энэ хуудсан дээр

Хэрхэн ажилладаг

Scrollspy зөв ажиллахын тулд хэд хэдэн шаардлага тавьдаг:

Үүнийг Bootstrap nav компонент эсвэл жагсаалтын бүлэгт ашиглах ёстой .
Scrollspy нь position: relative;таны тагнаж байгаа элемент дээр ихэвчлэн <body>.
Зангуу ( <a>) шаардлагатай бөгөөд үүнтэй элементийг зааж өгөх ёстой id.

Амжилттай хэрэгжсэнээр таны навигаци эсвэл жагсаалтын бүлгийг .activeхолбогдох зорилтууд дээр үндэслэн ангиудыг нэг зүйлээс нөгөө зүйл рүү шилжүүлэх болно.

Гүйлгэх боломжтой сав, гарын хандалт

Хэрэв та гүйлгэх боломжтой сав (-ээс бусад ) хийж байгаа бол гарын хандалтыг баталгаажуулахын тулд иж бүрдэл болон түүний хажууд байрлуулсан <body>байхаа мартуузай .heightoverflow-y: scroll;tabindex="0"

Navbar-ийн доорх хэсгийг гүйлгэж, идэвхтэй ангийн өөрчлөлтийг хараарай. Унждаг зүйлсийг мөн тодотгох болно.

Эхний гарчиг

Энэ бол 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. 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>

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

Топбарын навигацдаа гүйлгэх үйлдлийг хялбархан нэмэхийн тулд тагнахыг хүсэж буй элементдээ нэмнэ 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>.

Үл үзэгдэх зорилтот элементүүдийг үл тоомсорлосон

Харагдахгүй зорилтот элементүүдийг үл тоомсорлож, тэдгээрийн харгалзах навигацийн зүйлсийг хэзээ ч онцлохгүй.

Арга зүй

сэргээх

Scrollspy-г DOM-д элемент нэмэх, хасахтай хамт ашиглах үед та дараах байдлаар сэргээх аргыг дуудах хэрэгтэй болно.

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

захиран зарцуулах

Элементийн scrollspy-г устгадаг. (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="".

Нэр	Төрөл	Өгөгдмөл	Тодорхойлолт
`offset`	тоо	`10`	Гүйлгэх байрлалыг тооцоолохдоо дээд талаас нь солих пиксел.
`method`	мөр	`auto`	Тагнасан элемент аль хэсэгт байгааг олно. `auto`Гүйлгэх координатыг авах хамгийн сайн аргыг сонгоно. гүйлгэх координатыг авах аргыг ашиглана `offset`. гүйлгэх координатыг авахын тулд болон шинж чанаруудыг ашиглана .`Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft`
`target`	мөр \| jQuery объект \| DOM элемент		Scrollspy залгаасыг ашиглах элементийг зааж өгнө.

Үйл явдал

Үйл явдлын төрөл	Тодорхойлолт
`activate.bs.scrollspy`	Энэ үйл явдал гүйлгэх элемент дээр шинэ зүйл гүйлгэх үед идэвхждэг.

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

Scrollspy

Хэрхэн ажилладаг

Гүйлгэх боломжтой сав, гарын хандалт

Navbar дээрх жишээ

Эхний гарчиг

Хоёр дахь гарчиг

Гурав дахь гарчиг

Дөрөв дэх гарчиг

Тав дахь гарчиг

Оруулсан nav-тай жишээ

1-р зүйл

Зүйл 1-1

Зүйл 1-2

2-р зүйл

3-р зүйл

Зүйл 3-1

Зүйл 3-2

Жагсаалтын бүлэгтэй жишээ

1-р зүйл

2-р зүйл

3-р зүйл

4-р зүйл

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

JavaScript-ээр дамжуулан

Шийдвэрлэх боломжтой ID зорилтууд шаардлагатай

Үл үзэгдэх зорилтот элементүүдийг үл тоомсорлосон

Арга зүй

сэргээх

захиран зарцуулах

getInstance

getOrCreateInstance

Сонголтууд

Үйл явдал