Scrollspy

עדכן אוטומטית את רכיבי הניווט של Bootstrap או רשימת קבוצות בהתבסס על מיקום הגלילה כדי לציין איזה קישור פעיל כעת בנקודת התצוגה.

בעמוד זה

איך זה עובד

ל-Scrollspy יש כמה דרישות לתפקוד תקין:

יש להשתמש בו ברכיב או בקבוצת רשימה של Bootstrap .
Scrollspy דורש position: relative;על הרכיב שאתה מרגל אחריו, בדרך כלל ה- <body>.
עוגנים ( <a>) נדרשים וחייבים להצביע על אלמנט עם זה id.

לאחר יישום בהצלחה, הניווט או קבוצת הרשימה שלך יתעדכנו בהתאם, ויעבירו את .activeהכיתה מפריט אחד למשנהו על סמך היעדים המשויכים להם.

מיכלים ניתנים לגלילה וגישה למקלדת

אם אתה יוצר קונטיינר שניתן לגלול (מלבד ה- <body>), הקפד שתהיה לך heightערכה overflow-y: scroll;ומיושמת עליה - לצד a tabindex="0"כדי להבטיח גישה למקלדת.

גלול באזור שמתחת לסרגל הניווט וצפה בשינוי הכיתה הפעילה. הפריטים הנפתחים יודגשו גם כן.

כותרת ראשונה

זהו חלק מהתוכן של מציין מיקום עבור דף הגלילה. שימו לב שכאשר אתם גוללים למטה בעמוד, קישור הניווט המתאים מודגש. זה חוזר על עצמו בכל דוגמה של הרכיב. אנחנו ממשיכים להוסיף כאן עוד עותק לדוגמה כדי להדגיש את הגלילה וההדגשה.

כותרת שניה

כותרת שלישית

כותרת רביעית

כותרת חמישית

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

דוגמה עם ניווט מקונן

Scrollspy עובד גם עם .navs מקוננות. אם קינן .navהוא .active, גם הוריו יהיו .active. גלול את האזור שליד סרגל הניווט וצפה בשינוי הכיתה הפעילה.

פריט 1

פריט 1-1

פריט 1-2

פריט 2

פריט 3

פריט 3-1

פריט 3-2

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

דוגמה עם רשימה-קבוצה

Scrollspy עובד גם עם .list-groups. גלול את האזור שליד קבוצת הרשימה וצפה בשינוי הכיתה הפעילה.

פריט 1 פריט 2 פריט 3 פריט 4

פריט 1

פריט 2

פריט 3

פריט 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>

נוֹהָג

באמצעות תכונות נתונים

כדי להוסיף בקלות התנהגות גלילית לניווט בסרגל העליון שלך, הוסף data-bs-spy="scroll"לרכיב שאתה רוצה לרגל אחריו (בדרך כלל זה יהיה ה- <body>). לאחר מכן הוסף את data-bs-targetהתכונה עם המזהה או המחלקה של רכיב האב של כל .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>

דרך JavaScript

לאחר הוספת position: relative;ה-CSS שלך, התקשר ל- scrollspy באמצעות JavaScript:

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

נדרשים יעדי זיהוי ניתנים לפתרון

קישורי Navbar חייבים להיות בעלי יעדי מזהה ניתנים לפתרון. לדוגמה, <a href="#home">home</a>חובה להתאים למשהו ב-DOM כמו <div id="home"></div>.

התעלמו ממרכיבי יעד לא גלויים

תתעלם מרכיבי יעד שאינם גלויים ופריטי הניווט המתאימים להם לעולם לא יודגשו.

שיטות

לְרַעֲנֵן

בעת שימוש ב-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

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-bs-, כמו ב- data-bs-offset="".

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
`offset`	מספר	`10`	פיקסלים לקיזוז מלמעלה בעת חישוב מיקום הגלילה.
`method`	חוּט	`auto`	מוצא באיזה קטע נמצא האלמנט המריגל. `auto`יבחר בשיטה הטובה ביותר לקבל קואורדינטות גלילה. `offset`ישתמש `Element.getBoundingClientRect()`בשיטה כדי לקבל קואורדינטות גלילה. `position`ישתמש במאפיינים `HTMLElement.offsetTop`ו `HTMLElement.offsetLeft`כדי לקבל קואורדינטות גלילה.
`target`	מחרוזת \| אובייקט jQuery \| אלמנט DOM		מציין רכיב להחלת הפלאגין Scrollspy.

אירועים

סוג אירוע	תיאור
`activate.bs.scrollspy`	אירוע זה מופעל על רכיב הגלילה בכל פעם שפריט חדש מופעל על ידי סרגל הגלילה.

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

Scrollspy

איך זה עובד

מיכלים ניתנים לגלילה וגישה למקלדת

דוגמה ב-navbar

כותרת ראשונה

כותרת שניה

כותרת שלישית

כותרת רביעית

כותרת חמישית

דוגמה עם ניווט מקונן

פריט 1

פריט 1-1

פריט 1-2

פריט 2

פריט 3

פריט 3-1

פריט 3-2

דוגמה עם רשימה-קבוצה

פריט 1

פריט 2

פריט 3

פריט 4

נוֹהָג

באמצעות תכונות נתונים

דרך JavaScript

נדרשים יעדי זיהוי ניתנים לפתרון

התעלמו ממרכיבי יעד לא גלויים

שיטות

לְרַעֲנֵן

להיפטר

getInstance

getOrCreateInstance

אפשרויות

אירועים