سکڕۆڵسپی

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

چۆن کاردەکات

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

ئەگەر جاڤاسکڕێپتەکەمان لە سەرچاوەوە دروست دەکەیت، پێویستی بەutil.js .
دەبێت لەسەر پێکهاتەی Bootstrap nav یان گروپی لیست بەکاربهێنرێت .
Scrollspy پێویستی position: relative;بەو توخمە هەیە کە تۆ سیخوڕی لەسەر دەکەیت، بەزۆری <body>.
لەکاتی سیخوڕیکردن لەسەر توخمەکانی تر جگە لە <body>, دڵنیابە کە heightکۆمەڵەیەکت هەیە و overflow-y: scroll;جێبەجێی دەکەیت.
ئەنکرەکان ( <a>) پێویستن و دەبێت ئاماژە بە توخمێک بکەن کە ئەو id.

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

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

@قەڵەو

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

@mdo

ناوەڕۆکی شوێنگرەوە بۆ نموونەی scrollspy. چونکە ئەو مۆزە و هونەرمەندە. (ئێمە بەم شێوەیە دەکەین) بۆیە دەتەوێت یاری بە سیحر بکەیت. بۆیە تەنها دڵنیابە پێش ئەوەی هەمووی بدەیت بە من. من بە پێ دەڕۆم، بە هەوا دەڕۆم (ئەمشەو). قسەکە بەجێبهێڵە، هەمووی بیستووە، کاتی ئەوە هاتووە بە پیاسەکەدا بڕۆن.

یەک

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

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

وە هەندێک ناوەڕۆکی شوێنگرەوەی تر، بۆ پێوەرێکی باش.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

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

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

بڕگەی یەکەم

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

بڕگەی 1-1

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

بڕگەی 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

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

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <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 ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-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 ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="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

بڕگەی یەکەم

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

بڕگەی دووەم

ناوەڕۆکی شوێنگرەوە بۆ نموونەی scrollspy list-group. ئەم یەکە پەیوەندی بە بڕگەی ٢ەوە هەیە، بەڵێ، بە لێدانی خۆی سەما دەکات. ئای نا. دەکرا گەورەترین بیت. چونکە منداڵەکەم تۆ یاری ئاگرینیت. ڕەنگە هۆکارێک بێت بۆ ئەوەی هەموو دەرگاکان دابخرێن. دڵت بکەرەوە و تەنها با دەست پێبکات. کەواتە très chic، بەڵێ، ئەو کلاسیکە.

بڕگەی سێیەم

ناوەڕۆکی شوێنگرەوە بۆ نموونەی scrollspy list-group. ئەم یەکە پەیوەندی بە بڕگەی ٣ەوە هەیە، ئێمە بەرزتر و بەرزتر دەڕۆین. هەرگیز یەکێکیان بەبێ ئەوی تریان نەکرد، ئێمە پەیمانمان کرد. من لەسەر هەوا دەڕۆم. کەسێک وتی تاتۆکەت لابردووە. ئێستا وەک پەپوولەیەک دەسوڕێمەوە. تۆن، تان گونجاو و ئامادە، گێڕانەوەی بۆ سەرەوە هۆکارەکەی gettin' قورس. چونکە جارێک تۆ هی منیت، جارێک تۆ هی منیت. تەنها دەبێت ڕووناکییەکە ئاگر بکەیتەوە و با بدرەوشێتەوە! بۆیە بەر بۆلیڤارەکە کەوتین. ئایا هەرگیز هەست دەکەیت، هەست دەکەیت ئەوەندە کاغەز تەنک دەکەیت. هەمووی دەبینم، ئێستا دەیبینم.

بڕگەی 4

ناوەڕۆکی شوێنگرەوە بۆ نموونەی scrollspy list-group. ئەم یەکە پەیوەندی بە بڕگەی 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-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <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-spy="scroll"بۆ ئەو توخمەی کە دەتەوێت سیخوڕی لەسەر بکەیت (بە شێوەیەکی ئاسایی ئەمە دەبێتە <body>). پاشان data-targetتایبەتمەندییەکە زیاد بکە لەگەڵ ID یان پۆلی توخمە باوکەکەی هەر .navپێکهاتەیەکی Bootstrap.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

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

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

$('body').scrollspy({ target: '#navbar-example' })

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

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

`:visible`توخمە نائامانجەکان پشتگوێ دەخرێن

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

شێوازەکان

`.scrollspy('refresh')`

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

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

`.scrollspy('dispose')`

سکڕۆڵسپی توخمێک لەناو دەبات.

بژاردەکان

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

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

ڕووداوەکان

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

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})

سکڕۆڵسپی

چۆن کاردەکات

نموونە لە navbar

@قەڵەو

@mdo

یەک

two

three

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

بڕگەی یەکەم

بڕگەی 1-1

بڕگەی 1-2

Item 2

Item 3

Item 3-1

Item 3-2

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

بڕگەی یەکەم

بڕگەی دووەم

بڕگەی سێیەم

بڕگەی 4

بەکارهێنان

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

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

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

:visibleتوخمە نائامانجەکان پشتگوێ دەخرێن

شێوازەکان

.scrollspy('refresh')

.scrollspy('dispose')

بژاردەکان

ڕووداوەکان

`:visible`توخمە نائامانجەکان پشتگوێ دەخرێن

`.scrollspy('refresh')`

`.scrollspy('dispose')`