Μετάβαση στο κύριο περιεχόμενο Μετάβαση στην πλοήγηση εγγράφων
in English

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 λειτουργεί επίσης με ένθετα .navs. Αν είναι φωλιασμένο , θα .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-groups. Κάντε κύλιση στην περιοχή δίπλα στην ομάδα λίστας και παρακολουθήστε την αλλαγή της ενεργής τάξης.

Στοιχείο 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...
})