Scrollspy

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

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

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

Scrollspy нь зангууны иш татсан элементийг харагдац руу гүйлгэх үед .activeзангуу ( <a>) элементүүд дээрх ангийг сэлгэдэг. Scrollspy нь Bootstrap-ийн nav компонент эсвэл жагсаалтын бүлэгтэй хамт хамгийн сайн хэрэглэгддэг боловч энэ нь одоогийн хуудасны ямар ч зангуу элементүүдтэй ажиллах болно. Энэ нь хэрхэн ажилладаг талаар эндээс үзнэ үү.idhref

Эхлэхийн тулд scrollspy-д хоёр зүйл хэрэгтэй: навигаци, жагсаалтын бүлэг эсвэл энгийн холбоосууд, мөн гүйлгэх боломжтой сав. Гүйлгэх боломжтой контейнер нь багц болон <body>тохируулсан элемент байж болно .heightoverflow-y: scroll
Гүйлгэх боломжтой контейнер дээр холбогдох навигацийн өвөрмөц зүйл хаана байна data-bs-spy="scroll"гэж нэмнэ үү. Гарын хандалтыг баталгаажуулахын тулд бас оруулахаа мартуузай .data-bs-target="#navId"navIdidtabindex="0"
Таныг "тагнуулсан" савыг гүйлгэх үед .activeхолбогдох навигаци доторх зангуу холбоосуудаас анги нэмэгдэж, хасагдана. Холбоосууд нь шийдвэрлэх боломжтой idзорилтуудтай байх ёстой, эс тэгвээс тэдгээрийг үл тоомсорлодог. Жишээлбэл, <a href="#home">home</a>DOM-д байх ёстой зүйлтэй тохирч байх ёстой<div id="home"></div>
Харагдахгүй зорилтот элементүүдийг үл тоомсорлох болно. Доорх үл үзэгдэх элементүүд хэсгийг үзнэ үү.

Жишээ

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

Эхний гарчиг

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

Оруулсан nav

Scrollspy нь мөн үүрлэсэн .navs-тэй ажилладаг. Хэрэв үүрлэсэн .navбол .activeтүүний эцэг эх нь мөн байх болно .active. Navbar-ийн хажууд байгаа хэсгийг гүйлгээд идэвхтэй ангийн өөрчлөлтийг хараарай.

1-р зүйл

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

Зүйл 1-1

Зүйл 1-2

2-р зүйл

3-р зүйл

Зүйл 3-1

Зүйл 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 нь зөвхөн навигацийн бүрэлдэхүүн хэсэг болон жагсаалтын бүлгүүдээр хязгаарлагдахгүй тул <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 instances нь бүх зорилтот элементүүдийг үл тоомсорлодог. 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}". Өгөгдлийн шинж чанараар сонголтуудыг дамжуулахдаа сонголтын нэрийн төрлийг " camelCase "-ээс " 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`	мөр	`0px 0px -25%`	Гүйлгэх байрлалыг тооцоолохдоо огтлолцлын ажиглагчийн rootMargin хүчинтэй нэгж.
`smoothScroll`	логик	`false`	Хэрэглэгч ScrollSpy ажиглагдах боломжтой холбоос дээр дарах үед жигд гүйлгэхийг идэвхжүүлдэг.
`target`	мөр, DOM элемент	`null`	Scrollspy залгаасыг ашиглах элементийг зааж өгнө.
`threshold`	массив	`[0.1, 0.5, 1]`	`IntersectionObserver` гүйлгэх байрлалыг тооцоолохдоо босго хүчинтэй оролт.

Хуучирсан сонголтууд

5.1.3-ыг хүртэл бид offset& methodсонголтуудыг ашиглаж байсан бөгөөд одоо хуучирч, солигдсон байна rootMargin. Буцаж нийцтэй байдлыг хадгалахын тулд бид өгөгдсөнийг үргэлжлүүлэн задлан шинжлэх offsetболовч v6rootMargin дээр энэ функцийг устгах болно .

Арга зүй

Арга	Тодорхойлолт
`dispose`	Элементийн scrollspy-г устгадаг. (DOM элемент дээр хадгалагдсан өгөгдлийг устгана)
`getInstance`	DOM элементтэй холбоотой scrollspy жишээг авах статик арга.
`getOrCreateInstance`	DOM элементтэй холбоотой scrollspy жишээг авах эсвэл эхлүүлээгүй тохиолдолд шинээр үүсгэх статик арга.
`refresh`	DOM-д элементүүдийг нэмэх эсвэл хасах үед та сэргээх аргыг дуудах хэрэгтэй болно.

Дахин сэргээх аргыг ашигласан жишээ энд байна:

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

Үйл явдал

Үйл явдал	Тодорхойлолт
`activate.bs.scrollspy`	Энэ үйл явдал нь зангууг scrollspy-ээр идэвхжүүлэх бүрт гүйлгэх элемент дээр ажилладаг.

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