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

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

overscroll-behavior-inline Η ιδιότητα χρησιμοποιείται για να κλείσει τη αλυσίδα ροής ή την ανατροφοδότηση υπερβολικής κύλισης του στοιχείου όταν προσπαθεί να κύλιση πέρα από τα όρια κύλισης στον κατευθυντήριο άξονα.

Λάβετε υπόψη:Για να προκαλέσετε το overscroll-behavior στον κατευθυντήριο άξονα, μπορεί να χρειαστεί να χρησιμοποιήσετε χειρονομίες γυρισμού στο trackpad ή το οθόνη αφής.

Η αλυσίδα κύλισης είναι η συμπεριφορά κύλισης του γονικού στοιχείου όταν υπάρχει υπερρόλασμα σε ένα στοιχείο. Αυτό είναι το προεπιλεγμένο comportment.

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

CSS overscroll-behavior-inline και overscroll-behavior-block Ο χαρακτηριστικός είναι παρόμοιος με το overscroll-behavior-x και overscroll-behavior-y Ο χαρακτηριστικός είναι πολύ παρόμοιος, αλλά overscroll-behavior-inline και overscroll-behavior-block Ο χαρακτηριστικός εξαρτάται από την κατεύθυνση του κύλιματος και την κατεύθυνση του γραπτού.

Λάβετε υπόψη:Περιλαμβάνει τις ιδιότητες CSS writing-mode Ορίζει την κατεύθυνση του γραπτού. Αυτό επηρεάζει αν η κατεύθυνση του γραπτού είναι στον άξονα x ή στον άξονα y, και overscroll-behavior-inline Τα αποτελέσματα του χαρακτηριστικού. Για τις σελίδες αγγλικούς, η κατεύθυνση του γραπτού είναι από αριστερά προς τα δεξιά, η κατεύθυνση του κύλιματος είναι προς τα κάτω.

Παράδειγμα

Παράδειγμα 1

Απενεργοποίηση της αλυσίδας κύλισης στο στοιχείο <div> στο εσωτερικό της κατεύθυνσης του γραπτού:

#yellowDiv {
  overscroll-behavior-inline: contain;
}

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

Παράδειγμα 2: Συγχώνευση της ιδιότητας writing-mode

Ορίζει την τοποθεσία του στοιχείου <div>; writing-mode Όταν η τιμή του χαρακτηριστικού writing-mode είναι 'vertical-rl', η κατεύθυνση του εσωτερικού γράψματος γίνεται κατά μήκος του άξονα y, οπότε overscroll-behavior-inline Τώρα λειτουργεί κατά μήκος του άξονα y, αντί του άξονα x:

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-inline: contain;
}

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

Γλώσσα σύνταξης CSS

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

Τιμή χαρακτηριστικού

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

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

Προεπιλεγμένη τιμή: αυτόματα
Κληρονομικότητα: Όχι
Προσαρμογή κίνησης: Μη υποστηριζόμενο. Δείτε:Στοιχεία κίνησης.
Έκδοση: CSS3
Γλώσσα σύνταξης JavaScript: object.style.overscrollBehaviorInline="μηδέν"

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

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

Χρωμόστυλο Ακτή Φαξ Σαφάρι Οπερα
63.0 18.0 59.0 16.0 50.0

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

Αναφορά:CSS overscroll-behavior ιδιότητα

Αναφορά:CSS overscroll-behavior-block ιδιότητα

Αναφορά:CSS overscroll-behavior-x ιδιότητα

Αναφορά:CSS overscroll-behavior-y ιδιότητα

Αναφορά:CSS scroll-behavior ιδιότητα

Αναφορά:CSS scroll-margin ιδιότητα

Αναφορά:CSS scroll-padding ιδιότητα

Αναφορά:CSS scroll-snap-align ιδιότητα

Αναφορά:CSS writing-mode ιδιότητα