Scrollspy

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

Бу биттә

Ничек бу эшли

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

утильләштерү

Элементның скролспиясен юк итә. (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

Ничек бу эшли

Күчерелә торган контейнерлар һәм клавиатурага керү

Диңгез тактасында мисал

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

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

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

Дүртенче баш

Бишенче баш

Ояланган диңгез белән үрнәк

1 пункт

1-1 пункт

1-2 пункт

2 пункт

3 пункт

3-1 пункт

3-2 пункт

Исемлек-төркем белән мисал

1 пункт

2 пункт

3 пункт

4 пункт

Куллану

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

JavaScript аша

Чишелә торган ID максатлары кирәк

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

Методлар

яңарту

утильләштерү

getInstance

getOrCreateInstance

Вариантлар

Вакыйгалар