Scrollspy

Αυτόματη ενημέρωση της πλοήγησης Bootstrap ή των στοιχείων ομάδας λίστας με βάση τη θέση κύλισης για να υποδείξει ποιος σύνδεσμος είναι ενεργός αυτήν τη στιγμή στη θύρα προβολής.

Σε αυτήν την σελίδα

Πως δουλεύει

Το Scrollspy έχει μερικές απαιτήσεις για να λειτουργήσει σωστά:

Πρέπει να χρησιμοποιείται σε ένα στοιχείο πλοήγησης Bootstrap ή μια ομάδα λίστας .
Το Scrollspy απαιτεί position: relative;το στοιχείο που κατασκοπεύετε, συνήθως το <body>.
Απαιτούνται άγκυρες ( <a>) και πρέπει να δείχνουν σε ένα στοιχείο με αυτό id.

Όταν υλοποιηθεί επιτυχώς, η πλοήγησή σας ή η ομάδα λιστών θα ενημερωθεί αναλόγως, μετακινώντας την .activeτάξη από το ένα στοιχείο στο επόμενο με βάση τους συσχετισμένους στόχους τους.

Δοχεία με δυνατότητα κύλισης και πρόσβαση στο πληκτρολόγιο

Εάν φτιάχνετε ένα κοντέινερ με δυνατότητα κύλισης (εκτός από το <body>), φροντίστε να έχετε ένα heightσετ και overflow-y: scroll;να το εφαρμόσετε σε αυτό—μαζί με ένα tabindex="0"για να εξασφαλίσετε πρόσβαση στο πληκτρολόγιο.

Κάντε κύλιση στην περιοχή κάτω από τη γραμμή πλοήγησης και παρακολουθήστε την αλλαγή της ενεργής τάξης. Τα αναπτυσσόμενα στοιχεία θα επισημανθούν επίσης.

Πρώτη επικεφαλίδα

Αυτό είναι κάποιο περιεχόμενο κράτησης θέσης για τη σελίδα 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>

Παράδειγμα με ένθετη πλοήγηση

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

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Για να προσθέσετε εύκολα τη συμπεριφορά scrollspy στην πλοήγησή σας στην επάνω γραμμή, προσθέστε 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'
})

Απαιτούνται επιλύσιμοι στόχοι αναγνωριστικών

Οι σύνδεσμοι της γραμμής πλοήγησης πρέπει να έχουν επιλύσιμους στόχους αναγνωριστικού. Για παράδειγμα, το <a href="#home">home</a>must αντιστοιχεί σε κάτι στο 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()
})

διαθέτω

Καταστρέφει το scrollspy ενός στοιχείου. (Καταργεί τα αποθηκευμένα δεδομένα στο στοιχείο 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`	Pixel για μετατόπιση από την κορυφή κατά τον υπολογισμό της θέσης κύλισης.
`method`	σειρά	`auto`	Βρίσκει σε ποια ενότητα βρίσκεται το κατασκοπευμένο στοιχείο. `auto`Θα επιλέξει την καλύτερη μέθοδο για τη λήψη συντεταγμένων κύλισης. `offset`θα χρησιμοποιήσει τη `Element.getBoundingClientRect()`μέθοδο για να πάρει συντεταγμένες κύλισης. `position`θα χρησιμοποιήσει τις ιδιότητες `HTMLElement.offsetTop`και `HTMLElement.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...
})

Scrollspy

Πως δουλεύει

Δοχεία με δυνατότητα κύλισης και πρόσβαση στο πληκτρολόγιο

Παράδειγμα στο navbar

Πρώτη επικεφαλίδα

Δεύτερη επικεφαλίδα

Τρίτη επικεφαλίδα

Τέταρτη επικεφαλίδα

πέμπτη επικεφαλίδα

Παράδειγμα με ένθετη πλοήγηση

Στοιχείο 1

Στοιχείο 1-1

Στοιχείο 1-2

Στοιχείο 2

Στοιχείο 3

Στοιχείο 3-1

Στοιχείο 3-2

Παράδειγμα με λίστα-ομάδα

Στοιχείο 1

Στοιχείο 2

Στοιχείο 3

Στοιχείο 4

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Μέσω JavaScript

Απαιτούνται επιλύσιμοι στόχοι αναγνωριστικών

Τα μη ορατά στοιχεία στόχου αγνοήθηκαν

Μέθοδοι

φρεσκάρω

διαθέτω

getInstance

getOrCreateInstance

Επιλογές

Εκδηλώσεις