Scrollspy
Αυτόματη ενημέρωση της πλοήγησης Bootstrap ή των στοιχείων ομάδας λίστας με βάση τη θέση κύλισης για να υποδείξει ποιος σύνδεσμος είναι ενεργός αυτήν τη στιγμή στη θύρα προβολής.
Πως δουλεύει
Το Scrollspy έχει μερικές απαιτήσεις για να λειτουργήσει σωστά:
- Πρέπει να χρησιμοποιείται σε ένα στοιχείο πλοήγησης Bootstrap ή μια ομάδα λίστας .
- Το Scrollspy απαιτεί
position: relative;
το στοιχείο που κατασκοπεύετε, συνήθως το<body>
. - Απαιτούνται άγκυρες (
<a>
) και πρέπει να δείχνουν σε ένα στοιχείο με αυτόid
.
Όταν εφαρμοστεί επιτυχώς, η πλοήγησή σας ή η ομάδα λίστας θα ενημερωθεί αναλόγως, μετακινώντας την .active
τάξη από το ένα στοιχείο στο επόμενο με βάση τους συσχετισμένους στόχους τους.
Δοχεία με δυνατότητα κύλισης και πρόσβαση στο πληκτρολόγιο
Εάν φτιάχνετε ένα κοντέινερ με δυνατότητα κύλισης (εκτός από το <body>
), φροντίστε να έχετε ένα height
σετ και overflow-y: scroll;
να το εφαρμόσετε σε αυτό—μαζί με ένα tabindex="0"
για να εξασφαλίσετε πρόσβαση στο πληκτρολόγιο.
Παράδειγμα στο 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>
Παράδειγμα με ένθετη πλοήγηση
Το Scrollspy λειτουργεί επίσης με ένθετα .nav
s. Αν είναι φωλιασμένο , θα .nav
είναι .active
και οι γονείς του .active
. Κάντε κύλιση στην περιοχή δίπλα στη γραμμή πλοήγησης και παρακολουθήστε την αλλαγή της ενεργής τάξης.
Στοιχείο 1
Αυτό είναι κάποιο περιεχόμενο κράτησης θέσης για τη σελίδα scrollspy. Σημειώστε ότι καθώς κάνετε κύλιση προς τα κάτω στη σελίδα, επισημαίνεται ο κατάλληλος σύνδεσμος πλοήγησης. Επαναλαμβάνεται σε όλο το παράδειγμα του στοιχείου. Συνεχίζουμε να προσθέτουμε κάποιο άλλο παράδειγμα αντιγράφου εδώ για να τονίσουμε την κύλιση και την επισήμανση.
Στοιχείο 1-1
Αυτό είναι κάποιο περιεχόμενο κράτησης θέσης για τη σελίδα scrollspy. Σημειώστε ότι καθώς κάνετε κύλιση προς τα κάτω στη σελίδα, επισημαίνεται ο κατάλληλος σύνδεσμος πλοήγησης. Επαναλαμβάνεται σε όλο το παράδειγμα του στοιχείου. Συνεχίζουμε να προσθέτουμε κάποιο άλλο παράδειγμα αντιγράφου εδώ για να τονίσουμε την κύλιση και την επισήμανση.
Στοιχείο 1-2
Αυτό είναι κάποιο περιεχόμενο κράτησης θέσης για τη σελίδα scrollspy. Σημειώστε ότι καθώς κάνετε κύλιση προς τα κάτω στη σελίδα, επισημαίνεται ο κατάλληλος σύνδεσμος πλοήγησης. Επαναλαμβάνεται σε όλο το παράδειγμα του στοιχείου. Συνεχίζουμε να προσθέτουμε κάποιο άλλο παράδειγμα αντιγράφου εδώ για να τονίσουμε την κύλιση και την επισήμανση.
Στοιχείο 2
Αυτό είναι κάποιο περιεχόμενο κράτησης θέσης για τη σελίδα scrollspy. Σημειώστε ότι καθώς κάνετε κύλιση προς τα κάτω στη σελίδα, επισημαίνεται ο κατάλληλος σύνδεσμος πλοήγησης. Επαναλαμβάνεται σε όλο το παράδειγμα του στοιχείου. Συνεχίζουμε να προσθέτουμε κάποιο άλλο παράδειγμα αντιγράφου εδώ για να τονίσουμε την κύλιση και την επισήμανση.
Στοιχείο 3
Αυτό είναι κάποιο περιεχόμενο κράτησης θέσης για τη σελίδα scrollspy. Σημειώστε ότι καθώς κάνετε κύλιση προς τα κάτω στη σελίδα, επισημαίνεται ο κατάλληλος σύνδεσμος πλοήγησης. Επαναλαμβάνεται σε όλο το παράδειγμα του στοιχείου. Συνεχίζουμε να προσθέτουμε κάποιο άλλο παράδειγμα αντιγράφου εδώ για να τονίσουμε την κύλιση και την επισήμανση.
Στοιχείο 3-1
Αυτό είναι κάποιο περιεχόμενο κράτησης θέσης για τη σελίδα scrollspy. Σημειώστε ότι καθώς κάνετε κύλιση προς τα κάτω στη σελίδα, επισημαίνεται ο κατάλληλος σύνδεσμος πλοήγησης. Επαναλαμβάνεται σε όλο το παράδειγμα του στοιχείου. Συνεχίζουμε να προσθέτουμε κάποιο άλλο παράδειγμα αντιγράφου εδώ για να τονίσουμε την κύλιση και την επισήμανση.
Στοιχείο 3-2
Αυτό είναι κάποιο περιεχόμενο κράτησης θέσης για τη σελίδα 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>
Παράδειγμα με λίστα-ομάδα
Το Scrollspy λειτουργεί επίσης με .list-group
s. Κάντε κύλιση στην περιοχή δίπλα στην ομάδα λίστας και παρακολουθήστε την αλλαγή της ενεργής τάξης.
Στοιχείο 1
Αυτό είναι κάποιο περιεχόμενο κράτησης θέσης για τη σελίδα scrollspy. Σημειώστε ότι καθώς κάνετε κύλιση προς τα κάτω στη σελίδα, επισημαίνεται ο κατάλληλος σύνδεσμος πλοήγησης. Επαναλαμβάνεται σε όλο το παράδειγμα του στοιχείου. Συνεχίζουμε να προσθέτουμε κάποιο άλλο παράδειγμα αντιγράφου εδώ για να τονίσουμε την κύλιση και την επισήμανση.
Στοιχείο 2
Αυτό είναι κάποιο περιεχόμενο κράτησης θέσης για τη σελίδα scrollspy. Σημειώστε ότι καθώς κάνετε κύλιση προς τα κάτω στη σελίδα, επισημαίνεται ο κατάλληλος σύνδεσμος πλοήγησης. Επαναλαμβάνεται σε όλο το παράδειγμα του στοιχείου. Συνεχίζουμε να προσθέτουμε κάποιο άλλο παράδειγμα αντιγράφου εδώ για να τονίσουμε την κύλιση και την επισήμανση.
Στοιχείο 3
Αυτό είναι κάποιο περιεχόμενο κράτησης θέσης για τη σελίδα 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
χαρακτηριστικό με το αναγνωριστικό ή την κλάση του γονικού στοιχείου οποιουδήποτε .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...
})