in English

Scrollspy

قم تلقائيًا بتحديث تنقل Bootstrap أو سرد مكونات المجموعة استنادًا إلى موضع التمرير للإشارة إلى الرابط النشط حاليًا في منفذ العرض.

كيف تعمل

يحتوي Scrollspy على بعض المتطلبات للعمل بشكل صحيح:

  • إذا كنت تقوم ببناء JavaScript من المصدر ، فهذا يتطلبutil.js .
  • يجب استخدامه في مجموعة قائمة أو مكون تنقل Bootstrap .
  • يتطلب Scrollspy position: relative;على العنصر الذي تتجسس عليه ، وعادةً ما يكون ملف <body>.
  • عند التجسس على عناصر أخرى غير الـ <body>، تأكد من وجود heightمجموعة overflow-y: scroll;وتطبيقها.
  • المراسي ( <a>) مطلوبة ويجب أن تشير إلى عنصر بذلك id.

عند التنفيذ بنجاح ، سيتم تحديث التنقل أو مجموعة القائمة وفقًا لذلك ، ونقل .activeالفصل من عنصر إلى العنصر التالي بناءً على الأهداف المرتبطة بهما.

المثال في نافبار

قم بالتمرير في المنطقة أسفل شريط التنقل وشاهد تغيير الفصل النشط. سيتم تمييز عناصر القائمة المنسدلة أيضًا.

@سمين

محتوى العنصر النائب لمثال 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>

مثال مع التنقل المتداخل

يعمل Scrollspy أيضًا مع ملفات .navs المتداخلة. إذا كانت متداخلة .nav، .activeفسيكون والداها أيضًا .active. قم بالتمرير في المنطقة المجاورة لشريط التنقل وشاهد تغيير الفصل النشط.

البند 1

محتوى العنصر النائب لمثال scrollspy. هذا يتعلق بالبند 1. يأخذك أميال عالية ، عالية جدا ، لأنها حصلت على تلك الابتسامة الدولية. هناك شخص غريب في سريري ، هناك قصف في رأسي. أوه لا. في حياة أخرى سأجعلك تبقى. لأني ، أنا قادر على أي شيء. أرتدي معركتي التتويجية. تستخدم لسرقة خمور والديك والصعود إلى السطح. نغمة ، أسمر مناسب وجاهز ، اقلبها لأنها ثقيلة. حبها مثل المخدرات. أعتقد أنني نسيت أن لدي خيارًا.

البند 1-1

محتوى العنصر النائب لمثال scrollspy. هذا يتعلق بالبند 1-1. لديك أرقى الهندسة المعمارية. طوابع جواز السفر ، إنها عالمية. جيد ، طازج ، شرس ، لقد حصلنا عليه. لم أخطط أبدًا أن أفقدك يومًا ما. إنها تأكل قلبك. قبلة كونية ، كل خطوة هي سحر. أعني هؤلاء ، أعني أنها هي. تحياتي أيها الأحباء ، دعنا نذهب في رحلة. فقط امتلك ليلة مثل الرابع من يوليو! لكنك تفضل أن تضيع.

البند 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. هذا يتعلق بالبند 3-2. أنت أصلي ، لا يمكن استبداله. طوال الليل يلعبون ، أغنيتك. فتيات كاليفورنيا لا يمكن إنكاره. مثل طائر بلا قفص. لا يوجد خوف الآن ، اتركها وكن حراً فقط ، سأحبك دون قيد أو شرط. أستطيع أن أرى الكتابة على الحائط. يمكنك السفر حول العالم ولكن لا شيء يقترب من الساحل الذهبي.

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

مثال مع قائمة المجموعة

يعمل Scrollspy أيضًا مع .list-groups. قم بالتمرير في المنطقة المجاورة لمجموعة القائمة وشاهد تغيير الفصل النشط.

البند 1

محتوى العنصر النائب لمثال مجموعة قائمة scrollspy. هذا يتعلق بالبند 1. لا تحتاج إلى اعتذار. لا يوجد خوف الآن ، اتركها وكن حراً فقط ، سأحبك دون قيد أو شرط. ليلة الجمعة السابقة. لا تكن خجولًا نوعًا ما سأراهن أنه جميل. الصيف بعد المدرسة الثانوية عندما التقينا لأول مرة. لأنها الملهمة والفنانة. ماذا؟ انتظر. اعتقدت أنني كنت الاستثناء.

البند 2

محتوى العنصر النائب لمثال مجموعة قائمة scrollspy. هذا يتعلق بالبند 2. نعم ، هي ترقص على إيقاعها الخاص. أوه لا. كان يمكن أن تكون أعظم. لأنك ، حبيبي ، أنت لعبة نارية. ربما سبب إغلاق جميع الأبواب. افتح قلبك ودعه يبدأ. إنها أنيقة جدًا ، نعم ، إنها كلاسيكية.

البند 3

محتوى العنصر النائب لمثال مجموعة قائمة scrollspy. هذا يتعلق بالبند 3. نذهب إلى أعلى وأعلى. لا أحد بدون الآخر ، عقدنا ميثاقًا. أنا أمشي على الهواء. قال أحدهم أنك أزلت الوشم. الآن أنا العائمة مثل فراشة. نغمة ، أسمر مناسب وجاهز ، اقلبها لأنها ثقيلة. لأنه بمجرد أن تكون ملكي ، بمجرد أن تصبح ملكي. عليك فقط إشعال الضوء وتركه يلمع! لذلك اصطدمنا بالجادة. هل شعرت من قبل أن الورق رقيق للغاية. أرى كل شيء ، أراه الآن.

البند 4

محتوى العنصر النائب لمثال مجموعة قائمة scrollspy. هذا يتعلق بالبند 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>

إستعمال

عبر سمات البيانات

لإضافة سلوك التمرير بسهولة إلى شريط التنقل العلوي ، أضف data-spy="scroll"إلى العنصر الذي تريد التجسس عليه (عادةً ما يكون هذا هو <body>). ثم أضف data-targetالسمة بمعرف أو فئة العنصر الأصل لأي .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>

عبر JavaScript

بعد الإضافة position: relative;في CSS الخاص بك ، قم باستدعاء scrollspy عبر JavaScript:

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

مطلوب تحديد أهداف معرّف قابل للحل

يجب أن تحتوي روابط Navbar على أهداف معرف قابلة للحل. على سبيل المثال ، <a href="#home">home</a>يجب أن يتوافق a مع شيء ما في DOM مثل <div id="home"></div>.

تجاهل العناصر غير :visibleالمستهدفة

سيتم تجاهل العناصر المستهدفة التي لا تتوافق مع :visiblejQuery ولن يتم إبراز عناصر التنقل المقابلة لها.

طُرق

.scrollspy('refresh')

عند استخدام scrollspy مع إضافة عناصر أو إزالتها من DOM ، ستحتاج إلى استدعاء طريقة التحديث كما يلي:

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

.scrollspy('dispose')

يدمر التمرير لعنصر.

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-offset="".

اسم يكتب تقصير وصف
عوض رقم 10 بكسل للإزاحة من الأعلى عند حساب موضع التمرير.
طريقة سلسلة تلقاءي البحث عن القسم الذي يوجد فيه العنصر التجسس. autoسيختار أفضل طريقة للحصول على إحداثيات التمرير. offsetسيستخدم طريقة jQuery offset للحصول على إحداثيات التمرير. positionسيستخدم طريقة موقع jQuery للحصول على إحداثيات التمرير.
استهداف سلسلة | كائن jQuery | عنصر DOM يحدد عنصرًا لتطبيق البرنامج المساعد Scrollspy.

الأحداث

نوع الحدث وصف
activ.bs.scrollspy يتم تشغيل هذا الحدث على عنصر التمرير عندما يتم تنشيط عنصر جديد بواسطة scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})