Scrollspy hmanga ziah a ni

Viewport-a eng link nge active mek tih hriattir turin scroll position hmangin Bootstrap navigation emaw list group components emaw chu automatic-in update rawh.

He page ah hian

A hnathawh dan

Scrollspy hian a hnathawh that theih nan thil mamawh tlemte a nei a:

Bootstrap nav component emaw list group emaw ah hman tur a ni .
Scrollspy hian position: relative;i spying element chu a mamawh a, a tlangpuiin <body>.
Anchors ( <a>) te hi a ngai a , chu chuan element pakhat a kawhhmuh tur a idni .

Hlawhtling taka implement a nih chuan i nav emaw list group emaw chuan a tul angin a update ang a, .activean target inzawm dan azirin class chu item pakhat atanga item dang ah a sawn ang.

Scroll theih container leh keyboard hman theihna tur a awm bawk

Scrollable container (a ni lo) i siam a nih chuan , set <body>nei la, chutah chuan apply ngei ang che— keyboard access theihna turin a bulah.heightoverflow-y: scroll;tabindex="0"

Navbar hnuaia area chu scroll la, active class inthlak dan chu en rawh. Dropdown items te pawh a highlight ang.

Thupui hmasa ber

Hei hi scrollspy page atana placeholder content thenkhat a ni. Page i scroll down lai chuan navigation link dik tak chu a rawn lang chhuak tih hre reng ang che. Component entirnan a repeat vek a ni. Hetah hian scroll leh highlighting ngaih pawimawh nan entirnan copy engemaw zat kan dah belh zel a ni.

Thupui pahnihna

Thupui pathumna

Thupui palina

Thupui pangana

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

Entirnan nested nav hmangin

Scrollspy hian nested .navs nen pawh a thawk thei bawk. Nested .nava nih chuan a .activenu leh pa te pawh an ni ang .active. Navbar bula area chu scroll la, active class inthlak dan chu en rawh.

Item 1-na a ni

Item 1-1-na a ni

Item 1-2-na a ni

Item 2-na a ni

Item 3-na a ni

Item 3-1-na a ni

Item 3-2-na a ni

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

Entirnan list-group nen

Scrollspy pawh hian .list-groups. List group bula area chu scroll la, active class inthlak dan chu en rawh.

Item 1-na a ni Item 2-na a ni Item 3-na a ni Item 4-na a ni

Item 1-na a ni

Item 2-na a ni

Item 3-na a ni

Item 4-na a ni

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

Hman dan tur

Data attribute hmangin a ni

I topbar navigation-a awlsam taka scrollspy behavior dah belh data-bs-spy="scroll"tur chuan, i spy duh element-ah dah la (most typically this would be the <body>). Tichuan Bootstrap component data-bs-targeteng pawha parent element ID emaw class emaw nen attribute chu add ang che..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 hmangin

I CSS i dah hnuah position: relative;JavaScript hmangin scrollspy chu ko rawh:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

ID target chinfel theih a ngai

Navbar link ah hian resolvable id target a awm tur a ni. Entirnan, a <a href="#home">home</a>chu DOM-a thil awm ang chi nen a inmil tur a <div id="home"></div>ni.

Target element hmuh theih lohte chu ngaihthah a ni

Target element hmuh theih loh te chu ngaihthah a ni ang a, a inmil nav item te chu a highlight ngai lovang.

Thiltih dan tur

tih thar leh rawh

DOM atanga elements dah belh emaw paih emaw nena inzawma scrollspy hman hian refresh method chu hetiang hian i ko a ngai ang:

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

paih chhuak rawh

Element pakhat scrollspy a tichhia. (DOM element-a data dahkhawmte a paih chhuak)

GetInstance tih a ni

Static method hmanga DOM element nena inzawm scrollspy instance hmuh theihna tur

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

GetOrCreateInstance tih theih a ni

Static method hmangin DOM element nena inzawm scrollspy instance chu i hmu thei a, a nih loh leh initialized a nih loh chuan a thar siam theih a ni bawk

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

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-bs-, data-bs-offset="".

Hming	Lampang	Hlawhchhamna	Hrilhfiahna
`offset`	a zat	`10`	Scroll awmna tur chhut hunah chunglam atanga offset tur pixels.
`method`	hrui	`auto`	Finds which section the spied element is in. `auto`scroll coordinate hmuh theihna tur kawng tha ber a thlang ang. scroll coordinate hmuh nan method `offset`hmang ang . scroll coordinate hmuh nan and property te a hmang ang .`Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft`
`target`	string \| jQuery thil awmzia \| DOM element a ni		Scrollspy plugin hman tur element a tarlang.

Thil thlengte

Event chi hrang hrang	Hrilhfiahna
`activate.bs.scrollspy`	He event hian scrollspy-in item thar a activate apiangin scroll element-ah a kap thin.

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

Scrollspy hmanga ziah a ni

A hnathawh dan

Scroll theih container leh keyboard hman theihna tur a awm bawk

Entirnan navbar ah

Thupui hmasa ber

Thupui pahnihna

Thupui pathumna

Thupui palina

Thupui pangana

Entirnan nested nav hmangin

Item 1-na a ni

Item 1-1-na a ni

Item 1-2-na a ni

Item 2-na a ni

Item 3-na a ni

Item 3-1-na a ni

Item 3-2-na a ni

Entirnan list-group nen

Item 1-na a ni

Item 2-na a ni

Item 3-na a ni

Item 4-na a ni

Hman dan tur

Data attribute hmangin a ni

JavaScript hmangin

ID target chinfel theih a ngai

Target element hmuh theih lohte chu ngaihthah a ni

Thiltih dan tur

tih thar leh rawh

paih chhuak rawh

GetInstance tih a ni

GetOrCreateInstance tih theih a ni

Thil thlan theih a ni

Thil thlengte