سکڕۆڵسپی

بە شێوەیەکی ئۆتۆماتیکی ڕێکخستنی Bootstrap یان پێکهاتەکانی گروپی لیست نوێ بکەرەوە بە پشتبەستن بە شوێنی سکڕۆڵ بۆ ئەوەی ئاماژە بەوە بدەیت کە کام بەستەر لە ئێستادا لە ڤیوپۆرت چالاکە.

لەم پەیجەدا

چۆن کاردەکات

Scrollspy چەند پێداویستییەکی هەیە بۆ ئەوەی بە باشی کار بکات:

دەبێت لەسەر پێکهاتەی Bootstrap nav یان گروپی لیست بەکاربهێنرێت .
Scrollspy پێویستی position: relative;بەو توخمە هەیە کە سیخوڕی لەسەر دەکەیت، بەزۆری <body>.
ئەنکرەکان ( <a>) پێویستن و دەبێت ئاماژە بە توخمێک بکەن کە ئەو id.

کاتێک بە سەرکەوتوویی جێبەجێ دەکرێت، گروپی nav یان لیستەکەت بەپێی ئەوە نوێ دەبێتەوە، .activeپۆلەکە لە بابەتێکەوە بۆ بابەتی دیکە دەگوازێتەوە بە پشتبەستن بە ئامانجە پەیوەندیدارەکانیان.

کۆنتێنەری سکڕۆڵ و دەستگەیشتن بە کیبۆرد

ئەگەر تۆ دەفرێکی سکڕۆڵ دروست دەکەیت (جگە لە <body>)، دڵنیابە کە heightکۆمەڵەیەکت هەیە و overflow-y: scroll;بەکاری دەهێنیت- شانبەشانی a 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>

نموونە لەگەڵ nested nav

هەروەها Scrollspy لەگەڵ nested .navs کاردەکات. ئەگەر هێلانەیەک .navبێت .activeئەوا دایک و باوکی هەروەها دەبنە .active. ناوچەی تەنیشت navbar سکڕۆڵ بکە و سەیری گۆڕانی پۆلی چالاک بکە.

بڕگەی یەکەم

بڕگەی 1-1

بڕگەی 1-2

بڕگەی دووەم

بڕگەی سێیەم

بڕگەی 3-1

بڕگەی ٣-٢

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

نموونە لەگەڵ list-group

هەروەها Scrollspy لەگەڵ .list-groups کاردەکات. ناوچەی تەنیشت گروپی لیستەکە بچۆ و سەیری گۆڕانی پۆلی چالاک بکە.

بڕگەی یەکەم بڕگەی دووەم بڕگەی سێیەم بڕگەی 4

بڕگەی یەکەم

بڕگەی دووەم

بڕگەی سێیەم

بڕگەی 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>). پاشان data-bs-targetتایبەتمەندییەکە زیاد بکە لەگەڵ ID یان پۆلی توخمە باوکەکەی هەر .navپێکهاتەیەکی Bootstrap.

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>

لە ڕێگەی جاڤاسکڕێپتەوە

دوای زیادکردنی position: relative;لە CSS ـەکەتدا، لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە scrollspy بکە:

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

ئامانجی ناسنامەی چارەسەرکراو پێویستە

بەستەرەکانی ناوبار دەبێت ئامانجی id چارەسەرکراویان هەبێت. بۆ نموونە، a <a href="#home">home</a>دەبێت لەگەڵ شتێکدا بگونجێت لە DOM وەک <div id="home"></div>.

توخمە ئامانجە نەبینراوەکان پشتگوێ خران

ئەو توخمانەی ئامانج کە دیار نین پشتگوێ دەخرێن و بابەتە nav ی هاوبەشیان هەرگیز تیشک ناخرێنە سەر.

شێوازەکان

نوێکردنەوە

لەکاتی بەکارهێنانی scrollspy لەگەڵ زیادکردن یان لابردنی توخمەکان لە DOM، پێویستە بەم شێوەیە بانگی شێوازی نوێکردنەوە بکەیت:

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

فڕێ بدە

سکڕۆڵسپی توخمێک لەناو دەبات. (زانیاری هەڵگیراو لەسەر توخمەکەی DOM لا دەبات)

getInstance

شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی scrollspy بەدەست بهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە

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

getOrCreateInstance

شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی scrollspy بەدەست بهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە، یان یەکێکی نوێ دروست بکەیت لە ئەگەری دەستپێنەکردندا

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

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-bs-, وەک لە data-bs-offset="".

ناو	جۆر	بنەڕەتی	وەسف
`offset`	ژماره‌	`10`	پێکسڵەکان بۆ ئۆفسێت لە سەرەوە لەکاتی حیسابکردنی شوێنی سکڕۆڵ.
`method`	ڕستە	`auto`	دەدۆزێتەوە کە توخمە سیخوڕکراوەکە لە کام بەشدایە. `auto`باشترین ڕێگە هەڵدەبژێرێت بۆ بەدەستهێنانی کۆئۆردینیاتی سکڕۆڵ. `offset`شێوازەکە بەکاردەهێنێت `Element.getBoundingClientRect()`بۆ بەدەستهێنانی کۆئۆردینیاتی سکڕۆڵ. تایبەتمەندیەکانی و `position`بەکاردەهێنێت بۆ بەدەستهێنانی کۆئۆردینیاتی سکڕۆڵ.`HTMLElement.offsetTopHTMLElement.offsetLeft`
`target`	ڕستە \| شتێکی jQuery \| توخمێکی DOM		توخمێک دیاری دەکات بۆ جێبەجێکردنی پێوەکراوەکەی Scrollspy.

ڕووداوەکان

جۆری ڕووداو	وەسف
`activate.bs.scrollspy`	ئەم ڕووداوە هەرکاتێک شتێکی نوێ لەلایەن scrollspy چالاک بوو، ئاگر لە توخمە سکڕۆڵەکە دەکات.

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

سکڕۆڵسپی

چۆن کاردەکات

کۆنتێنەری سکڕۆڵ و دەستگەیشتن بە کیبۆرد

نموونە لە navbar

سەردێڕی یەکەم

سەردێڕی دووەم

سەردێڕی سێیەم

سەردێڕی چوارەم

سەردێڕی پێنجەم

نموونە لەگەڵ nested nav

بڕگەی یەکەم

بڕگەی 1-1

بڕگەی 1-2

بڕگەی دووەم

بڕگەی سێیەم

بڕگەی 3-1

بڕگەی ٣-٢

نموونە لەگەڵ list-group

بڕگەی یەکەم

بڕگەی دووەم

بڕگەی سێیەم

بڕگەی 4

بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

لە ڕێگەی جاڤاسکڕێپتەوە

ئامانجی ناسنامەی چارەسەرکراو پێویستە

توخمە ئامانجە نەبینراوەکان پشتگوێ خران

شێوازەکان

نوێکردنەوە

فڕێ بدە

getInstance

getOrCreateInstance

بژاردەکان

ڕووداوەکان