باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

سکڕۆڵسپی

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

لەم پەیجەدا

چۆن کاردەکات

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

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

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

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

ئەگەر تۆ دەفرێکی سکڕۆڵ دروست دەکەیت (جگە لە <body>)، دڵنیابە کە heightکۆمەڵەیەکت هەیە و overflow-y: scroll;بەکاری دەهێنیت- شانبەشانی a tabindex="0"بۆ دڵنیابوون لە دەستگەیشتن بە کیبۆرد.

نموونە لە navbar

ناوچەی خوارەوەی navbar سکڕۆڵ بکە و سەیری گۆڕانی پۆلی چالاک بکە. هەروەها بابەتە دابەزینەکان تیشک دەخرێنە سەر.

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

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

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

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

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

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

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

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

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

ئەمە هەندێک ناوەڕۆکی شوێنگرەوەیە بۆ لاپەڕەی 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 سکڕۆڵ بکە و سەیری گۆڕانی پۆلی چالاک بکە.

بڕگەی یەکەم

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

بڕگەی 1-1

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

بڕگەی 1-2

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

بڕگەی دووەم

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

بڕگەی سێیەم

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

بڕگەی 3-1

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

بڕگەی ٣-٢

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

<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 کاردەکات. ناوچەی تەنیشت گروپی لیستەکە بچۆ و سەیری گۆڕانی پۆلی چالاک بکە.

بڕگەی یەکەم

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

بڕگەی دووەم

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

بڕگەی سێیەم

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

بڕگەی 4

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

<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...
})