CSS overscroll-behavior ιδιότητα

Ορισμός και χρήση

overscroll-behavior Ο χαρακτηριστικός τύπος χρησιμοποιείται για να απενεργοποιήσει την αλυσίδα κύλισης (scroll chaining) ή την ανατροφοδότηση υπερβολικής κύλισης (overscroll affordance) όταν προσπαθεί να κυλίσει πέρα από τα όρια κύλισης.

Καπνός κύλισης: Όταν κύλιση υπερβολικής κύλισης σε ένα στοιχείο προκαλεί τη συμπεριφορά κύλισης του γονικού στοιχείου. Αυτό είναι το προεπιλεγμένο comportment.

Ανατροφοδότηση υπερβολικής κύλισης: Η ανατροφοδότηση που παρέχεται στον χρήστη όταν προσπαθεί να κυλίσει πέρα από τα όρια κύλισης. Για παράδειγμα, όταν προσπαθεί να κυλίσει πέρα από την κορυφή της σελίδας σε ένα κινητό συσκευή, συχνά εμφανίζεται βιβλιογραφική ανατροφοδότηση και η σελίδα ανανεώνεται.

overscroll-behavior Η ιδιότητα είναι συντομευμένη μορφή των παρακάτω ιδιοτήτων:

overscroll-behavior Οι τιμές της ιδιότητας μπορούν να ρυθμιστούν με διαφορετικούς τρόπους:

Αν η ιδιότητα overscroll-behavior έχει δύο τιμές:

overscroll-behavior: none contain;
  • Στην κατεύθυνση x: Δεν υπάρχει συμπεριφορά υπερπερικόλπισης
  • Στην κατεύθυνση y: Δεν υπάρχει αλυσίδα κύλισης αλλά επιτρέπεται η ανατροφοδότηση υπερπερικόλπισης

Αν η ιδιότητα overscroll-behavior έχει μια τιμή:

overscroll-behavior: contain;
  • Στις κατευθύνσεις x και y: Δεν υπάρχει αλυσίδα κύλισης αλλά επιτρέπεται η ανατροφοδότηση υπερπερικόλπισης

Παράδειγμα

Παράδειγμα 1

Κλείστε την αλυσίδα κύλισης του στοιχείου <div> που μπορεί να κλυλιθεί:

#yellowDiv {
  overscroll-behavior: contain;
}

Δοκιμάστε το προσωπικά

Παράδειγμα 2: Διπλή γλωσσική δομή:

Ρυθμίστε overscroll-behavior Η τιμή της ιδιότητας έχει ρυθμιστεί σε auto none，Επιτρέπει την αλυσίδα κύλισης και την ανατροφοδότηση υπερπερικόλπισης στην κατεύθυνση x αλλά όχι στην κατεύθυνση y:

#pinkDiv {
  overscroll-behavior: auto none;
}

Δοκιμάστε το προσωπικά

Γλώσσα CSS

overscroll-behavior: auto|contain|none|initial|inherit;

Τιμή ιδιότητας

Τιμή Περιγραφή
auto Επιτρέπεται η συμπεριφορά αλυσίδας κύλισης και ανατροφοδότησης υπερπερικόλπισης. Προεπιλεγμένη τιμή.
contain Επιτρέπεται η συμπεριφορά ανατροφοδότησης υπερπερικόλπισης αλλά όχι η συμπεριφορά αλυσίδας κύλισης.
none Δεν επιτρέπεται η ανατροφοδότηση υπερπερικόλπισης ή η συμπεριφορά αλυσίδας κύλισης.
initial Ρυθμίστε αυτή την ιδιότητα στην προεπιλεγμένη της τιμή. Δείτε: initial.
inherit Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο. Δείτε: inherit.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: auto
Κληρονομικότητα: Όχι
Ανίμαση: Δεν υποστηρίζεται. Δείτε:Ιδιότητες σχετικές με την αнимацию.
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.overscrollBehavior="none"

Υποστήριξη του προγράμματος περιήγησης

Οι αριθμοί στην τаблицή αντιπροσωπεύουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* Στην Microsoft Edge, η τιμή της ιδιότητας 'none' χειρίζεται ως 'contain', το οποίο είναι λάθος.

Σχετικές σελίδες

Σχετικά με:CSS overscroll-behavior-x ιδιότητα

Σχετικά με:CSS overscroll-behavior-y ιδιότητα

Σχετικά με:CSS scroll-behavior ιδιότητα

Σχετικά με:CSS scroll-margin ιδιότητα

Σχετικά με:CSS scroll-padding attribute

Σχετικά με:CSS scroll-snap-align attribute