Αυτό το άρθρο δείχνει τη χρήση της ιδιότητας CSS υπερχείλιση-y με πολλά παραδείγματα.
Πώς να χρησιμοποιήσετε την ιδιότητα Overflow-y στο CSS;
Το CSS ' υπερχείλιση-υ Η ιδιότητα ' χρησιμοποιείται για τον έλεγχο της υπερχείλισης του περιεχομένου κατά μήκος του εγκάρσιου άξονα μέσα σε ένα στοιχείο. Καθορίζει εάν θα αποκοπεί το περιεχόμενο ή θα προστεθεί μια γραμμή κύλισης όταν το περιεχόμενο υπερβαίνει το ύψος του κοντέινερ. Οι πιθανές τιμές για αυτήν την ιδιότητα είναι ' ορατός », « κρυμμένος », « πάπυρος ', και ' αυτο '.
Ας επισκεφτούμε τα παρακάτω παραδείγματα για καλύτερη επίδειξη της ιδιότητας υπερχείλισης-y:
Παράδειγμα 1: Χρήση του Visible ως τιμής για την ιδιότητα Overflow-y
Ο ' ορατός Η τιμή ” επιτρέπει στο περιεχόμενο να ξεχειλίσει από το κοντέινερ και δεν προσθέτει απόκομμα ή γραμμές κύλισης. Επισκεφτείτε το παρακάτω πρακτικό μπλοκ κώδικα:
<διαιρ >
>
>
>
Η περιγραφή του παραπάνω μπλοκ κωδικών:
- Αρχικά, ορίστε μια τιμή ' μητρική εταιρεία ' στο ' τάξη ' χαρακτηρίστε και χρησιμοποιήστε το ' στυλ ' Χαρακτηριστικό.
- Επιπλέον, δώστε την τιμή του ' ορατός 'στο CSS' υπερχείλιση-υ ” ιδιοκτησία. Και ορίστε το ίσο με το ' στυλ ” για να λειτουργήσει το στυλ CSS.
- Στη συνέχεια, δημιουργήστε ένα ένθετο ' div ' στοιχείο και αντιστοιχίστε του μια κλάση ' παιδίΠεριεχόμενο '. Επίσης, παρέχετε εικονικά δεδομένα σε αυτό.
Τώρα, χρησιμοποιήστε τις ιδιότητες CSS για να βελτιώσετε την οπτικοποίηση που βοηθά στην καλύτερη κατανόηση της ιδιότητας CSS υπερχείλισης-y:
.μητρική εταιρεία {πλάτος : 200 px ;
ύψος : 150 εικονοστοιχεία ;
σύνορο : 1 εικονοστοιχείο στερεός μαύρος ;
}
.παιδικόΠεριεχόμενο {
ύψος : 300 εικονοστοιχεία ;
χρώμα του φόντου : γαλάζιο ;
}
Η περιγραφή των ιδιοτήτων CSS δίνεται παρακάτω:
- Πρώτον, το « μητρική εταιρεία Επιλέγεται η κλάση και οι τιμές του ' 200 px », « 150 εικονοστοιχεία ', και ' 1px συμπαγές μαύρο ' αντιστοιχίζονται στο CSS ' πλάτος », « ύψος ', και ' σύνορο ” ακίνητα, αντίστοιχα.
- Στη συνέχεια, επιλέξτε το ' παιδίΠεριεχόμενο ' τάξη και ορίστε τις τιμές του ' 300 εικονοστοιχεία ' και ' γαλάζιο 'στο CSS' ύψος ' και ' χρώμα του φόντου ” ακίνητα, αντίστοιχα. Αυτή η τάξη επεκτείνεται σε « μητρική εταιρεία 'κλάση που ελέγχεται από το CSS' ξεχείλισμα ” ιδιοκτησία.
Μετά τη συλλογή των αποσπασμάτων κώδικα, η ιστοσελίδα εμφανίζεται ως εξής:
Το στιγμιότυπο εμφανίζει ότι το περιεχόμενο υπερχείλισης είναι πλέον ορατό και η γραμμή κύλισης ή το απόκομμα δεν έχει προστεθεί από προεπιλογή.
Παράδειγμα 2: Χρήση του Hidden ως τιμή για την ιδιότητα Overflow-y
Ο ' υπερχείλιση-υ « ακίνητο με αξία « κρυμμένος ” κρύβει όλο το περιεχόμενο που κινείται έξω από το μητρικό του κοντέινερ. Αυτή η ιδιότητα δεν προσθέτει γραμμές κύλισης, αντίθετα έκοψε το υπερχειλισμένο περιεχόμενο:
>
>
Το παραπάνω απόσπασμα κώδικα περιέχει:
- Πρώτον, ο ίδιος κωδικός εισάγεται ξανά με αύξηση του εικονικού περιεχομένου που τοποθετείται μέσα στο εσωτερικό στοιχείο div.
- Στη συνέχεια, αλλάξτε την τιμή του ' υπερχείλιση-υ ' ιδιοκτησία σε ' κρυμμένος ' στο ' 'ετικέτα που έχει μια κατηγορία ' μητρική εταιρεία '.
Μετά την εκ νέου απόδοση, η ιστοσελίδα μοιάζει με αυτό:
Το στιγμιότυπο εμφανίζει ότι το περιεχόμενο υπερχείλισης έχει αποκοπεί.
Παράδειγμα 3: Χρήση του Scroll ως τιμής για την ιδιότητα Overflow-y
Ρύθμιση της τιμής του ' υπερχείλιση-υ ' ακίνητο προς το ' πάπυρος ” επιτρέπει στον τελικό χρήστη να κάνει κύλιση στο
περιεχόμενο που το ξεχειλίζει. Ας επισκεφτούμε το παρακάτω μπλοκ κώδικα:
= 'μητρική εταιρεία' στυλ = 'overflow-y: scroll;' >
= 'παιδικό περιεχόμενο' > Αυτό είναι απλώς ψεύτικο περιεχόμενο χρησιμοποιείται για την επίδειξη της ιδιότητας υπερχείλισης-y όταν είναι ορατή. Αυτό είναι απλώς ψεύτικο περιεχόμενο χρησιμοποιείται για την επίδειξη της ιδιότητας υπερχείλισης-y όταν είναι ορατή.
>
>Στο παραπάνω μπλοκ κώδικα:
- Πρώτον, η ίδια δομή HTML έχει εισαχθεί μέσα στο ' <σώμα> ετικέτα '.
- Στη συνέχεια, αλλάξτε την τιμή του ' υπερχείλιση-υ ' ακίνητο προς το ' πάπυρος '. Αυτό επιτρέπει την « μητρική εταιρεία ” div για να ενεργοποιήσετε το εφέ κύλισης για τον έλεγχο του υπερχειλισμένου περιεχομένου.
Μετά τη μεταγλώττιση του παραπάνω μπλοκ κώδικα, η ιστοσελίδα εμφανίζεται ως εξής:
Το παραπάνω gid δείχνει ότι το εφέ κύλισης ήταν διαθέσιμο για τον έλεγχο του υπερχειλισμένου περιεχομένου.
Παράδειγμα 4: Χρήση του Auto ως τιμή για την ιδιότητα Overflow-y
Σε αυτό το παράδειγμα, οι χρήστες μπορούν να προσθέσουν μια γραμμή κύλισης μόνο εάν το περιεχόμενο δεν χωράει μέσα στο κοντέινερ. Επίσης, εάν το περιεχόμενο δεν ξεχειλίζει, η γραμμή κύλισης δεν θα προστεθεί. Είναι δυνατό παρέχοντας την τιμή του ' αυτο 'στο CSS' υπερχείλιση-υ ” ιδιοκτησία:
= 'μητρική εταιρεία' στυλ = 'υπερχείλιση-y: αυτόματη;' >
= 'παιδικό περιεχόμενο' > Αυτό είναι απλώς ψεύτικο περιεχόμενο χρησιμοποιείται για την επίδειξη της ιδιότητας υπερχείλισης-y όταν είναι ορατή. Αυτό είναι απλώς ψεύτικο περιεχόμενο χρησιμοποιείται για την επίδειξη της ιδιότητας υπερχείλισης-y όταν είναι ορατή.
>
>Στο παραπάνω μπλοκ κώδικα:
- Πρώτα, εισάγετε το ίδιο αρχείο HTML μέσα στο ' <σώμα> ' ετικέτα.
- Στη συνέχεια, ενημερώστε την τιμή του ' υπερχείλιση-υ ' ιδιοκτησία σε ' αυτο '. Επιτρέπει το εφέ κύλισης σε σχέση με το κατακόρυφο μήκος του περιεχομένου.
Μετά το τέλος της διαδικασίας μεταγλώττισης, η ιστοσελίδα λειτουργεί ως εξής:
Το παραπάνω gif εμφανίζει την ιδιότητα υπερχείλισης που έχει ενεργοποιήσει τη γραμμή κύλισης σύμφωνα με το μήκος του περιεχομένου.
συμπέρασμα
Το CSS ' υπερχείλιση-υ Η ιδιότητα ' χρησιμοποιείται για τον έλεγχο του υπερχειλισμένου περιεχομένου κατά μήκος του εγκάρσιου άξονα μέσα σε ένα στοιχείο. Η ιδιότητα υπερχείλισης-y ελέγχει το περιεχόμενο σύμφωνα με τη συγκεκριμένη τιμή που παρέχεται στις ιδιότητες υπερχείλισης-y. Ο ' οπτικός Η τιμή ' εμφανίζει το υπερχειλισμένο περιεχόμενο, το ' κρυμμένος Η τιμή ' κρύβει το περιεχόμενο υπερχείλισης και το ' πάπυρος Η τιμή προσθέτει μια γραμμή κύλισης για τον έλεγχο του περιεχομένου. Και αν η τιμή είναι ' αυτο Η γραμμή κύλισης προσθέτει ή αφαιρεί ανάλογα με το μήκος του περιεχομένου.