Scrollspy

Bootstrap навигациясен автоматик рәвештә яңартыгыз яки визуаль портта нинди сылтаманың актив булуын күрсәтү өчен әйләндерү позициясенә нигезләнеп төркем компонентларын санап чыгыгыз.

Бу биттә

Ничек бу эшли

Scrollspy .activeклассны якорь ( <a>) элементларына алыштыра, анкор белән күрсәтелгән элемент idкаралганда href. Scrollspy иң яхшы Bootstrap nav компоненты яки исемлек төркеме белән берлектә кулланыла , ләкин ул шулай ук хәзерге биттәге теләсә нинди якор элементлары белән эшләячәк. Менә ул ничек эшли.

Башлау өчен, scrollspy ике әйбер таләп итә: навигация, исемлек төркеме, яки гади сылтамалар җыелмасы, өстәвенә әйләндерә торган контейнер. Күчерелә торган контейнер <body>комплектлы яки махсус элемент heightбулырга мөмкин overflow-y: scroll.
Күчерелә торган контейнерга өстәгез data-bs-spy="scroll"һәм бәйләнгән навигациянең уникаль урыны data-bs-target="#navId"кайда . Клавиатурага керүне тәэмин итү өчен шулай ук кертегез.navIdidtabindex="0"
"Шпион" контейнерны әйләндергәндә, .activeкласс өстәлә һәм бәйләнешле навигация эчендә якорь сылтамаларыннан чыгарыла. Сылтамалар чишелә торган idмаксатлар булырга тиеш, югыйсә алар санга сукмыйлар. Мәсәлән <a href="#home">home</a>, DOM кебек нәрсәгә туры килергә тиеш<div id="home"></div>
Күренми торган максатчан элементлар игътибарсыз калачак. Түбәндә күренми торган элементлар бүлеген карагыз .

Мисаллар

Диңгез тактасы астындагы мәйданны әйләндерегез һәм актив класс үзгәрүен карагыз. Ачылучы менюны ачыгыз һәм тамчы әйберләрнең яктыртылганын карагыз.

Беренче башлам

Бу 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>

Ояланган диңгез

Scrollspy шулай ук ояланган .navs белән эшли. Ояланган .navбулса .active, аның әти-әнисе дә булачак .active. Диңгез тактасы янындагы мәйданны әйләндерегез һәм актив класс үзгәрүен карагыз.

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 инстанцияләре барлык максат элементларын санга сукмыйлар. 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()
  })
})

Куллану

Мәгълүмат атрибутлары аша

Сезнең өстәмә навигациягә scrollspy тәртибен җиңел өстәр 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 мәгълүматларына караганда, барлык компонентлар эксперименталь сакланган мәгълүмат атрибутын хуплый, data-bs-configалар гади компонент конфигурациясен JSON сызыгы итеп урнаштыра ала. Элемент 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` әйләндерү позициясен исәпләгәндә бусагадан дөрес кертү.

Искергән вариантлар

V5.1.3 кадәр без offset& methodвариантларны куллана идек, алар хәзер искергән һәм алыштырыла rootMargin. Арткы яраклашуны саклап калу өчен, без бирелгәнне анализлауны дәвам итәрбез offset, ләкин бу үзенчәлек v6даrootMargin бетереләчәк .

Методлар

Метод	Тасвирлау
`dispose`	Элементның скролспиясен юк итә. (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`	Бу вакыйга әйләндергеч элементны яндырганда, әйләндерү элементына янып тора.

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

Scrollspy

Ничек бу эшли

Мисаллар

Навбар

Беренче башлам

Икенче башлам

Өченче башлам

Дүртенче баш

Бишенче баш

Ояланган диңгез

1 пункт

1-1 пункт

1-2 пункт

2 пункт

3 пункт

3-1 пункт

3-2 пункт

Төркем исемлеге

1 пункт

2 пункт

3 пункт

4 пункт

Гади якорлар

1 пункт

2 пункт

3 пункт

4 пункт

5 пункт

Күренми торган элементлар

Куллану

Мәгълүмат атрибутлары аша

JavaScript аша

Вариантлар

Методлар

Вакыйгалар