Είναι μέσα σε ένα στρώμα

- ετικέτα ανοίγματος και

Αυτό είναι το κείμενο μέσα στο επίπεδο

Στο χαρακτηριστικό style της ετικέτας div, καθορίστε τους κανόνες και για τις γραμμές κύλισης του επιπέδου:

Εδώ overflow:auto σημαίνει ότι οι γραμμές κύλισης θα εμφανίζονται αυτόματα, δηλαδή όταν το περιεχόμενο του επιπέδου δεν ταιριάζει στις καθορισμένες διαστάσεις. Εάν το auto αντικατασταθεί με κύλιση, τότε αυτές οι λωρίδες θα υπάρχουν πάντα, ανεξάρτητα από το αν χρειάζονται ή όχι. Και η κρυφή τιμή θα έχει το αντίθετο αποτέλεσμα - δεν θα εμφανίζεται, ακόμα κι αν τα περιεχόμενα αυτού του δοχείου δεν είναι ορατά πέρα ​​από τις άκρες του.

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

Στις μέρες μας, το να έχεις τη δική σου ιστοσελίδα δεν είναι πολυτέλεια, αλλά μάλλον ανάγκη. Η δημιουργία του απαιτεί ορισμένες δεξιότητες και γνώσεις html. Η δημιουργία μιας απλής ιστοσελίδας είναι αρκετά εύκολη. Ωστόσο, η διακόσμησή του και η δημιουργία διαδραστικών στοιχείων που παρέχουν πρόσθετη λειτουργικότητα στον ιστότοπο θα προκαλέσει δυσκολίες σε έναν αρχάριο. Ένα από αυτά τα διαδραστικά στοιχεία που αυξάνει την ευκολία των επισκεπτών του ιστότοπου είναι η μπάρα. κύλιση. Είναι ιδιαίτερα χρήσιμο στα πεδία του ιστότοπου που εξασφαλίζουν τη σύνδεσή του με σενάρια (αλληλεπίδραση του ιστότοπου με τους χρήστες).

Θα χρειαστείτε

• Διαδίκτυο ή οποιοδήποτε σεμινάριο html

Οδηγίες

Το πιο σημαντικό πράγμα σε κάθε περίπτωση είναι η ευκολία. Η ίδια η ιδέα της χρήσης της ταινίας κύλισηστον ιστότοπό σας θα είναι κατάλληλο μόνο εάν υπαγορεύεται όχι από την επιθυμία σας, αλλά από την αναγκαιότητά του. Κάντε μια διάταξη όπου θέλετε να τοποθετήσετε λωρίδα κύλιση. Επιλέξτε ένα μέρος για κύλιση (αυτό ονομάζεται επίσης ρίγες κύλιση).

Επιλέξτε μια τοποθεσία για τη λωρίδα κύλισηστη σελίδα που σας ενδιαφέρει. Πρέπει να είναι στενά συνδεδεμένο με κάποιο στοιχείο (για παράδειγμα, ένα πεδίο κειμένου ή μια αναπτυσσόμενη λίστα). Πρέπει να υπολογίσετε αυτό το διάστημα σε pixel ή ποσοστά. Αυτό δεν είναι δύσκολο να γίνει, ειδικά εάν η διάταξη του ιστότοπου έχει σαφή δομή.

Μεταξύ των ετικετών BODY θα πρέπει να προσθέσετε τον τυπικό κωδικό κύλισης. Μπορείτε να το βρείτε σε οποιοδήποτε εγχειρίδιο html. Υπάρχουν δύο επιλογές - είτε προσθέστε αυτό το κομμάτι απευθείας στον κώδικα html της σελίδας ή επισυνάψτε το στο φύλλο στυλ css. Η δεύτερη μέθοδος είναι πιο βολική εάν αλλάζετε όχι μόνο έναν, αλλά ολόκληρο τον ιστότοπο. Στη συνέχεια, πρέπει να εισαγάγετε τις παραμέτρους χρώματος λωρίδας κύλιση, διαφορετικά θα είναι γκρι και χωρίς ενδιαφέρον. Το σχήμα δείχνει και επισημαίνει τα στοιχεία κύλισης. Οι παράμετροι πρέπει να εισάγονται με τον ίδιο τρόπο όπως φαίνεται στο σχήμα, με ερωτηματικό.

Τώρα πρέπει οπωσδήποτε να κάνετε τις βελτιώσεις σας. Να αφαιρέσει κύλισηφαινόταν το ίδιο σε όλα τα προγράμματα περιήγησης, ελέγξτε το στα κύρια - Internet Explorer, Mozilla Firefox και Opera. Αν είναι σε ένα από αυτά, επιστρέψτε στο πρώτο βήμα και διορθώστε τα λάθη.

Χρήσιμες συμβουλές

Υπάρχει ένας εύκολος τρόπος για να δημιουργήσετε μια γραμμή κύλισης για μια ιστοσελίδα. Ορίστε την παράμετρο ύψους για τον ιστότοπό σας στο 75%, τότε η κύλιση θα εμφανιστεί από μόνη της. Είναι αλήθεια ότι οι χρωματικοί συνδυασμοί του αξίζουν ακόμα προσαρμογή.

Πηγές:

• Ιστότοπος για αρχάριους προγραμματιστές ιστού το 2019

Οδηγίες

Πάρτε τη σωστή απόφαση. Ζώνη κύλισηθα πρέπει να εμφανίζεται στον ιστότοπό σας μόνο εάν αυτό υπαγορεύεται από την ανάγκη δημιουργίας πρόσθετης ευκολίας για τον χρήστη και όχι αποκλειστικά από τις επιθυμίες σας. Δημιουργήστε μια διάταξη της σελίδας στην οποία πρόκειται να τοποθετήσετε λωρίδα κύλιση. Επιλέξτε ένα κατάλληλο μέρος για αυτό.

Κάντε μια άκαμπτη δέσμευση κύλισης (αυτό μπορεί επίσης να ονομάζεται λωρίδα κύλιση) σε κάποιο συγκεκριμένο στοιχείο σελίδας. Αυτό θα μπορούσε να είναι ένα πεδίο κειμένου που αντιπροσωπεύει ένα . Υπολογίστε τη θέση «στάθμευσης» της λωρίδας σε pixel και ποσοστά. Αυτό δεν θα είναι καθόλου δύσκολο εάν η σελίδα είναι σαφώς δομημένη.

Προσθέστε έναν τυπικό κωδικό λωρίδας κύλισημεταξύ ετικετών σώματος. Εάν δεν ξέρετε για τι πράγμα μιλάμε, κατεβάστε οποιοδήποτε εγχειρίδιο σε διάταξη html. Ο κωδικός θα περιγραφεί ξεκάθαρα εκεί. Για τέτοιες περιπτώσεις, είναι καλύτερο να έχετε στη διάθεσή σας έτοιμα πρότυπα, ώστε να μπορείτε να πάρετε κάποια μεμονωμένα στοιχεία του κώδικα του προγράμματος από εκεί, γεγονός που απλοποιεί πολύ τη ζωή. Έτσι, βρήκατε τον κωδικό. Τοποθετήστε το είτε απευθείας στον ίδιο τον κώδικα της σελίδας είτε προσαρτήστε τον σε έναν πίνακα css, κάτι που είναι πολύ πιο απλό, αλλά μόνο εάν αλλάζετε όχι μία, αλλά όλες τις σελίδες του ιστότοπου.

Ορίστε τις παραμέτρους χρώματος για τη γραμμή, διαφορετικά θα είναι ένα τυπικό γκρι χρώμα, το οποίο πιθανότατα δεν θα ταιριάζει στο σχεδιασμό του ιστότοπου. Αυτές οι παράμετροι ρυθμίζονται με την ίδια σειρά όπως για οποιοδήποτε άλλο γραφικό στοιχείο στη σελίδα. Δοκιμή σε πολλά προγράμματα περιήγησης, για παράδειγμα Mozilla, Opera και Explorer. Εάν υπάρχει σε κάποιο από αυτά, διορθώστε τα σφάλματα κώδικα προγράμματος.

Ρυθμίστε την παράμετρο ύψους τοποθεσίας στο 75%, τότε ο κωδικός προγράμματος για κύλιση θα εισαχθεί αυτόματα. Αλλά πρέπει ακόμα να αλλάξεις λωρίδα κύλιση, και συγκεκριμένα τις γραφικές του παραμέτρους. Αυτό περιγράφεται στις προηγούμενες παραγράφους.

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

σύντομες πληροφορίες

Ονομασίες

	Περιγραφή	Παράδειγμα
<тип>	Υποδεικνύει τον τύπο της τιμής.	<размер>
Α & & Β	Οι τιμές πρέπει να εξάγονται με τη σειρά που καθορίζεται.	<размер> && <цвет>
A | σι	Υποδεικνύει ότι πρέπει να επιλέξετε μόνο μία τιμή από τις προτεινόμενες (A ή B).	κανονικό | μικρά καπάκια
Α || σι	Κάθε τιμή μπορεί να χρησιμοποιηθεί ανεξάρτητα ή μαζί με άλλες με οποιαδήποτε σειρά.	πλάτος || μετρώ
	Ομαδικές αξίες.	[ καλλιέργεια || σταυρός]
*	Επαναλάβετε μηδέν ή περισσότερες φορές.	[,<время>]*
+	Επαναλάβετε μία ή περισσότερες φορές.	<число>+
?	Ο καθορισμένος τύπος, λέξη ή ομάδα είναι προαιρετική.	ένθεση;
(Α, Β)	Επαναλάβετε τουλάχιστον Α, αλλά όχι περισσότερες από Β φορές.	<радиус>{1,4}
#	Επαναλάβετε μία ή περισσότερες φορές χωρισμένες με κόμμα.	<время>#

×

Αξίες

ορατό Εμφανίζει ολόκληρο το περιεχόμενο του στοιχείου, ακόμη και πέρα ​​από το καθορισμένο ύψος και πλάτος. hidden Εμφανίζεται μόνο η περιοχή μέσα στο στοιχείο, τα υπόλοιπα θα είναι κρυφά. κύλιση Οι γραμμές κύλισης προστίθενται πάντα. Οι γραμμές αυτόματης κύλισης προστίθενται μόνο όταν είναι απαραίτητο.

Sandbox

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

div (ύψος: 80 px; υπερχείλιση: αυτόματη ;)

Παράδειγμα

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 1.

Ρύζι. 1. Εφαρμογή της ιδιότητας υπερχείλισης

Μοντέλο αντικειμένου

Ενα αντικείμενο.στυλ.υπερχείλιση

Σημείωση

Internet Explorer έως την έκδοση 7.0 που περιλαμβάνει:

• σχετικά τοποθετημένα θυγατρικά στοιχεία των οποίων οι τιμές υπερχείλισης έχουν ρυθμιστεί σε αυτόματη ή κύλιση συμπεριφέρονται σαν να είχαν τη θέση: σταθερή.

Internet Explorer 8:

• Ο συνδυασμός υπερχείλισης με την τιμή κύλισης με τις ιδιότητες max-height και float μπορεί να οδηγήσει σε απώλεια στοιχείων ιστοσελίδας και εμφάνιση κενή οθόνης στο πρόγραμμα περιήγησης.
• Για ένα μπλοκ που έχει ιδιότητες float και υπερχείλισης ρυθμισμένες σε κύλιση , το πλάτος που καθορίζεται μέσω της ιδιότητας max-width αγνοείται.
• Το ύψος ενός μπλοκ με οριζόντια γραμμή κύλισης αυξάνεται κατά το ύψος της γραμμής κύλισης, αν και σύμφωνα με την προδιαγραφή CSS, οι δεδομένες διαστάσεις πρέπει επίσης να περιλαμβάνουν γραμμές κύλισης.

Ο Firefox 3.6 δεν εφαρμόζει σωστά την υπερχείλιση σε ομάδες κελιών πίνακα ( , , ).

Προσδιορισμός

Κάθε προδιαγραφή περνά από διάφορα στάδια έγκρισης.

• Σύσταση - Η προδιαγραφή έχει εγκριθεί από το W3C και συνιστάται ως πρότυπο.
• Σύσταση υποψηφίου ( Πιθανή σύσταση) - η ομάδα που είναι υπεύθυνη για το πρότυπο είναι ικανοποιημένη που εκπληρώνει τους στόχους της, αλλά απαιτεί βοήθεια από την κοινότητα ανάπτυξης για την εφαρμογή του προτύπου.
• Προτεινόμενη σύσταση Προτεινόμενη σύσταση) - σε αυτό το στάδιο το έγγραφο υποβάλλεται στο Γνωμοδοτικό Συμβούλιο του W3C για τελική έγκριση.
• Εργαζόμενο προσχέδιο - Μια πιο ώριμη έκδοση ενός προσχεδίου που έχει συζητηθεί και τροποποιηθεί για έλεγχο από την κοινότητα.
• προσχέδιο του συντάκτη ( Εκδοτικό προσχέδιο) - μια πρόχειρη έκδοση του προτύπου μετά από αλλαγές που έγιναν από τους συντάκτες του έργου.
• προσχέδιο ( Σχέδιο προδιαγραφών) - η πρώτη πρόχειρη έκδοση του προτύπου.

×

Από τον συγγραφέα:άρθρο του καλεσμένου μας, Peter Businessmans. Ο Peter είναι προγραμματιστής front-end στο Audience, όπου του αρέσει να γράφει στυλ στο SCSS. Σήμερα θα μας δείξει αυτό που αποκαλώ τίμιο κόλπο CSS. Ολόκληρος ο ιστός είναι κάθετος. Διαβάζετε τον ιστότοπο σαν ένα κανονικό βιβλίο: από αριστερά προς τα δεξιά, από πάνω προς τα κάτω. Αλλά μερικές φορές θέλετε να ξεφύγετε από την καθετότητα και να κάνετε κάτι τρελό: να κάνετε μια οριζόντια λίστα. Ή ακόμα πιο τρελό, μια οριζόντια τοποθεσία!

Θα ήταν ωραίο να μπορούσαμε να κάνουμε κάτι σαν αυτό:

/* ψεύτικος κωδικός */ div (κατεύθυνση κύλισης: οριζόντια; )

/* ψεύτικος κωδικός */ div( κύλιση - κατεύθυνση : οριζόντια ;

Δυστυχώς, αυτό δεν θα συμβεί. Αυτό δεν είναι καν προγραμματισμένο στο CSS.

Αυτό είναι πολύ κακό γιατί η εταιρεία στην οποία εργάζομαι θα το χρησιμοποιούσε πραγματικά. Κάνουμε πολλές παρουσιάσεις και η παρουσίαση είναι ένα αρκετά οριζόντιο πράγμα. Συνήθως, ο λόγος διαστάσεων των διαφανειών είναι 4:3 ή 16:9. Εξαιτίας αυτού, έχουμε ένα συνεχές πρόβλημα με τις οριζόντιες διαφάνειες και τις κάθετες τεχνολογίες ιστού. Με το "εμείς" εννοώ εμένα. Αλλά αυτό που αγαπώ είναι οι προκλήσεις.

Άλλη περίπτωση χρήσης

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

Μέθοδος χωρίς JavaScript

Όλοι γνωρίζουμε ότι υπάρχουν πολλοί τρόποι για να κάνετε οριζόντια κύλιση στο JS. Υπάρχουν μερικά παραδείγματα σχετικά με τα CSS-Tricks. Αναρωτιόμουν αν αυτή η ιδέα θα μπορούσε να εφαρμοστεί χρησιμοποιώντας καθαρό CSS. Η λύση αποδείχθηκε πολύ απλή:

δημιουργήστε ένα δοχείο με στοιχεία.

περιστρέψτε το δοχείο 90 μοίρες αριστερόστροφα, έτσι ώστε το κάτω άκρο να βρίσκεται στα δεξιά.

Περιστρέφουμε τα στοιχεία μέσα στο δοχείο πίσω στη θέση τους.

Βήμα 1) δημιουργήστε ένα δοχείο

Δημιουργήστε ένα div με πολλά παιδιά.

Στο παράδειγμά μας, το κοντέινερ με δυνατότητα κύλισης θα έχει πλάτος 300 pixel και θα έχει 8 στοιχεία 100x100 px. Τα μεγέθη είναι αυθαίρετα, μπορείτε να ορίσετε οποιοδήποτε.

< div class = "οριζόντια τετράγωνα κύλισης"> < div >στοιχείο 1< / div > < div >στοιχείο 2< / div > < div >στοιχείο 3< / div > < div >στοιχείο 4< / div > < div >στοιχείο 5< / div > < div >στοιχείο 6< / div > < div >στοιχείο 7< / div > < div >στοιχείο 8< / div > < / div >

Το ύψος του δοχείου θα γίνει το πλάτος και το αντίστροφο. Παρακάτω, το "πλάτος" του κοντέινερ θα είναι 300 px:

Horizontal-scroll-wrapper (πλάτος: 100 px, ύψος: 300 px, overflow-y: auto, overflow-x: κρυφό, )

πλάτος: 100 px; ύψος: 300 px; υπερχείλιση - y : auto ; υπερχείλιση - x : κρυφό ;

Και παιδικά στοιχεία:

Horizontal-scroll-wrapper > div (πλάτος: 100 px, ύψος: 100 px; )

Οριζόντια - κύλιση - περιτύλιγμα > div ( πλάτος: 100 px; ύψος: 100 px;

Βήμα 2) περιστρέψτε το δοχείο

Τώρα πρέπει να περιστρέψουμε το κοντέινερ κατά -90 μοίρες χρησιμοποιώντας την ιδιότητα μετασχηματισμού CSS. Έχουμε έναν οριζόντιο κύλινδρο.

Horizontal-scroll-wrapper ( ... μετασχηματισμός: περιστροφή (-90 μοίρες); μετασχηματισμός-προέλευση: δεξιά επάνω; )

Οριζόντια - κύλιση - περιτύλιγμα ( . . . μετασχηματισμός: περιστροφή (- 90 μοίρες);

Υπάρχει μόνο ένα μικρό πρόβλημα: τα θυγατρικά στοιχεία έχουν περιστραφεί μαζί με το δοχείο.

Βήμα 3) επιστρέψτε τα θυγατρικά στοιχεία στη θέση τους

Πώς λοιπόν επιστρέφετε τα στοιχεία στη θέση τους; Γυρίστε το πίσω χρησιμοποιώντας την ιδιότητα μετασχηματισμού CSS.

Horizontal-scroll-wrapper > div ( ... μετασχηματισμός: περιστροφή (90 μοίρες); μετασχηματισμός-προέλευση: δεξιά επάνω; )

Οριζόντια - κύλιση - περιτύλιγμα > div ( . . . μετασχηματισμός: περιστροφή (90 μοίρες); μετασχηματισμός - προέλευση : πάνω δεξιά ;

Βήμα 4) Διορθώθηκε η τοποθέτηση

Όλα φαίνονται καλά, αλλά υπάρχουν μερικά προβλήματα.

Περιστρέψαμε το δοχείο και ορίσαμε την επάνω δεξιά γωνία ως άγκυρα, γεγονός που έκανε την αριστερή πλευρά να μετατοπιστεί στο πλάτος του δοχείου. Αν δυσκολεύεστε να φανταστείτε, απλώς τοποθετήστε το δάχτυλό σας στην επάνω δεξιά γωνία της σελίδας και περιστρέψτε το. Έξοδος: πρέπει να το γυρίσετε πίσω χρησιμοποιώντας την ιδιότητα μετάφρασης.

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

Συμβατότητα

Έλεγξα τη συμβατότητα στις συσκευές που έχω στη διάθεσή μου.

Επιφάνεια εργασίας

Εφόσον το στυλ της γραμμής κύλισης λειτουργεί προς το παρόν μόνο σε προγράμματα περιήγησης Webkit/Blink, εμφανίζεται μια κανονική γκρι γραμμή κύλισης στον Firefox και στον IE. Αυτό μπορεί να διορθωθεί χρησιμοποιώντας JS και να τα αποκρύψετε εντελώς, αλλά αυτό είναι ένα θέμα για άλλο μάθημα.

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

Κινητές συσκευές

Ήμουν ευχάριστη έκπληξη όταν έμαθα ότι το Android αναγνωρίζει ότι το κοντέινερ έχει περιστραφεί και σας επιτρέπει να κάνετε κύλιση σύροντας αριστερά και δεξιά.

Με το iOS, αντίθετα, όλα δεν είναι τόσο ομαλά. Το πρόγραμμα περιήγησης συμπεριφέρεται σαν να μην είχε περιστραφεί καθόλου το κοντέινερ. Επομένως, για να κάνετε κύλιση πρέπει να κάνετε σάρωση προς τα πάνω και προς τα κάτω, κάτι που είναι αρκετά περίεργο. Υπερχείλιση: το κρυφό δεν λύνει το πρόβλημα.

συμπέρασμα

Σύμφωνα με τον ιστότοπο Can I Use, οι μετασχηματισμοί στο CSS υποστηρίζονται πλέον από το 93%+ των χρηστών (τη στιγμή που γράφονται αυτές οι γραμμές, Νοέμβριος 2016). Δεν πρέπει να υπάρχει πρόβλημα εδώ.

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

Το μεγαλύτερο πρόβλημα είναι οι είσοδοι αφής, στις οποίες πρέπει να κάνετε σάρωση προς τα πάνω και προς τα κάτω για να πάτε αριστερά και δεξιά. Μια λύση θα μπορούσε να είναι να γράψετε ένα μήνυμα στον ιστότοπο με μια εξήγηση, αλλά στη συνέχεια θα πρέπει να βασιστείτε στους χρήστες για να το διαβάσουν. Και ακόμη και τότε θα είναι αντίθετο με την κοινή λογική. Μια άλλη λύση είναι να καταγράψετε εισόδους αφής χρησιμοποιώντας JS σε συσκευές, αλλά τότε είναι καλύτερο να γράψετε τα πάντα σε JS και να εγκαταλείψετε εντελώς το CSS hack μας.

Σε αυτό το άρθρο θα εξετάσουμε λεπτομερώς την ιδιότητα υπερχείλισης με όλες τις τιμές της, η οποία σας επιτρέπει επίσης να προσθέσετε ή να αφαιρέσετε μια οριζόντια/κάθετη γραμμή κύλισης. Με άλλα λόγια, πώς να δημιουργήσετε γραμμές κύλισης.

Η υπερχείλιση στο CSS είναι υπεύθυνη για το πώς θα φαίνεται η εμφάνιση των πληροφοριών σε ένα μπλοκ εάν το περιεχόμενο υπερβαίνει το ύψος ή το πλάτος αυτού του μπλοκ. Αυτή η ιδιότητα ισχύει μόνο για στοιχεία μπλοκ (εμφάνιση : μπλοκ ; ή εκείνα που είναι αρχικά στοιχεία μπλοκ - div, κ.λπ.).

Πιθανές τιμές που παίρνει αυτή η ιδιότητα (ορατή από προεπιλογή):

• Ορατό - Εμφανίζεται ολόκληρο το περιεχόμενο του στοιχείου, ακόμη και πέρα ​​από το καθορισμένο ύψος και πλάτος.
• Κρυφό - Εμφανίζεται μόνο η περιοχή μέσα στο στοιχείο, τα υπόλοιπα θα είναι κρυφά.
• Κύλιση - Οι γραμμές κύλισης προστίθενται πάντα.
• Αυτόματη - Οι γραμμές κύλισης προστίθενται μόνο όταν είναι απαραίτητο.
• Inherit - Κληρονομεί την αξία του γονέα.

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

Στην επίδειξη μπορείτε να δείτε πώς λειτουργεί στην πράξη κάθε τιμή ιδιοκτησίας:

Κώδικας HTML

σώμα (περιθώριο: 0 0 0 0; padding: 0 0 60 px 0; μέγεθος γραμματοσειράς: 16 px;) h2 (χρώμα:#CC0033;) div (πλάτος: 200 px; /* σταθερό πλάτος */ ύψος: 300 px; /* σταθερό ύψος */ περίγραμμα: 1px συμπαγές #555;

Αξίζει να δοθεί προσοχή στο γεγονός ότι στη συγκεκριμένη περίπτωση τα μπλοκ έχουν δεδομένο σταθερό ύψος και πλάτος. Αυτό είναι σημαντικό, για παράδειγμα, εξετάστε την επιλογή όταν το ύψος του μπλοκ έχει οριστεί σε αυτόματο:

Βλέπουμε ότι το κείμενο εμφανίζεται σωστά μέσα στο μπλοκ σε όλες τις περιπτώσεις, εκτός από μια μικρή ταλαιπωρία στην περίπτωση της κύλισης , όπου εμφανίζονται ανενεργές γραμμές κύλισης.

Αλλά σε αυτή την περίπτωση υπάρχει ένας μικρός κίνδυνος, έχοντας συναντήσει τον οποίο πολλοί δεν καταλαβαίνουν γιατί προέκυψε και πώς να τον διορθώσουν. Το γεγονός είναι ότι εάν ένα μπλοκ με υπερχείλιση: ορατό? Δηλαδή, η προεπιλεγμένη τιμή και το περιεχόμενό της έχουν στοιχεία με οποιαδήποτε τιμή float εκτός από κανένα , τότε όλα αυτά θα εμφανίζονται λανθασμένα. Για να καταλάβετε ποια είναι αυτή η κατάσταση, εξετάστε ένα παράδειγμα:

Κάτω από το μπλοκ VisibleDiv υπάρχει ένα άλλο μπλοκ

Δεν υπάρχει τίποτα κάτω από το μπλοκ VisibleDiv

σώμα (περιθώριο: 0 0 0 0, συμπλήρωμα: 0 0 60 εικονοστοιχεία 0, μέγεθος γραμματοσειράς: 16 εικονοστοιχεία;) h2 (χρώμα:#CC0033;) p (float:αριστερά;) div (πλάτος: 500 εικονοστοιχεία, ύψος: αυτόματο, περίγραμμα: 1px συμπαγές #555 padding:4px

Στην πρώτη περίπτωση, είναι σαφές ότι το περιεχόμενο με την ιδιότητα float μετακινείται εκτός του μπλοκ και δεν λαμβάνεται υπόψη κατά τον προσδιορισμό του ύψους του μπλοκ, στη δεύτερη περίπτωση, κάτω από το μπλοκ με υπερχείλιση: ορατό ; Ένα άλλο μπλοκ είναι ειδικά τοποθετημένο και βαμμένο με διαφορετικό χρώμα. Αυτά δεν είναι τα μόνα παραδείγματα για το πώς μπορούν να συμπεριφέρονται τέτοια μπλοκ σε μια σελίδα (με υπερχείλιση : ορατό και ύψος: αυτόματο ; ). Αυτό μπορεί να διορθωθεί αντικαθιστώντας την ορατή τιμή με hidden να θυμάστε ότι αυτή η ιδιότητα πρέπει να καθορίζεται μόνο για μπλοκ με ύψος: auto; , εάν υπάρχει σταθερό ύψος, τότε υπάρχει μεγάλη πιθανότητα το περιεχόμενο απλώς να κρυφτεί εάν είναι μεγαλύτερο από το καθορισμένο ύψος.

Έτσι θα μοιάζει η διορθωμένη έκδοση:

Επίσης, δεν θα έχετε τέτοιο πρόβλημα εάν το μπλοκ έχει υπερχείλιση: ορατό ; και ύψος: αυτόματο. Ορίζεται επίσης κάποια τιμή της ιδιότητας float. Γενικά, σε πολλές περιπτώσεις, η εμφάνιση των στοιχείων εξαρτάται από ένα σύνολο ιδιοτήτων και όχι από μεμονωμένες ιδιότητες.

3. Επιβολή κατακόρυφης και οριζόντιας κύλισης σε ένα μπλοκ CSS
4. Παράδειγμα μπλοκ div με κύλιση

Σε αυτό το άρθρο θα εξετάσουμε το θέμα της δημιουργίας μπλοκ (div) σταθερού μεγέθους με δυνατότητα κύλισης οριζόντια και κάθετα. Αυτό μπορεί να υλοποιηθεί χρησιμοποιώντας CSS. Υπεύθυνος για αυτό ιδιότητα υπερχείλισης.

Σχετικά με την ιδιότητα χρήσιμης υπερχείλισης

Ιδιοκτησία ξεχείλισμαείναι υπεύθυνος για την εμφάνιση των περιεχομένων ενός στοιχείου μπλοκ. Μπορεί να χρησιμοποιηθεί όταν το περιεχόμενο δεν ταιριάζει πλήρως και εκτείνεται πέρα ​​από την περιοχή του μπλοκ.

υπερχείλιση-χ- είναι υπεύθυνος για την οριζόντια εμφάνιση των περιεχομένων ενός στοιχείου μπλοκ.
υπερχείλιση-υ- είναι υπεύθυνος για την κατακόρυφη εμφάνιση των περιεχομένων ενός στοιχείου μπλοκ.

Κωδικός CSS

Προκρούτκα (
υπερχείλιση: αυτόματη; /* ιδιότητα για οριζόντια κύλιση. Αυτόματα εάν το περιεχόμενο είναι μεγαλύτερο από το μπλοκ */
}

Ιδιότητες και τιμές υπερχείλισης

ορατός- εμφανίζεται ολόκληρο το περιεχόμενο του στοιχείου, ακόμη και εκτός του καθορισμένου πλάτους.
κρυμμένος- εμφανίζεται μόνο η περιοχή μέσα στο στοιχείο, τα υπόλοιπα είναι κρυφά.
πάπυρος- προσθέτει με δύναμη μια οριζόντια (y) ή οριζόντια (x) γραμμή κύλισης.
αυτο- μια οριζόντια γραμμή κύλισης προστίθεται αυτόματα εάν το μπλοκ είναι μικρότερο.

Εξετάστε ένα παράδειγμα κλάσης CSS. Σε πλάτος και ύψος ορίζουμε το πλάτος και το ύψος του μπλοκ που χρειαζόμαστε (τα περιεχόμενα του μπλοκ δεν θα υπερβαίνουν αυτά), και με την ιδιότητα υπερχείλισης: auto; ρυθμίστε την οριζόντια κύλιση εάν είναι απαραίτητο

Κωδικός CSS

Προκρούτκα (
πλάτος: 150 px; /* πλάτος του μπλοκ μας */
ύψος: 100 px; /* ύψος του μπλοκ μας */


υπερχείλιση: αυτόματη; /* ιδιότητα για οριζόντια κύλιση. Αυτόματα, εάν υπάρχουν περισσότερα από ένα μπλοκ */
}

Αναγκαστική κύλιση σε μπλοκ CSS

Μπορείτε επίσης να αναγκάσετε την κύλιση για να ταιριάζει σε ύψος και πλάτος. Για αυτό, κάθε άξονας: υπερχείλιση-y: κύλιση; (κάθετη) υπερχείλιση-x: κύλιση; (οριζόντια) καθορίστε την παράμετρο κύλισης, αναγκαστική κύλιση.

Κώδικας HTML και CSS

Προκρούτκα (
ύψος: 150 px; /* ύψος του μπλοκ μας */
φόντο: #fff; /* χρώμα φόντου, λευκό */
περίγραμμα: 1px στερεό #C1C1C1; /* μέγεθος και χρώμα περιγράμματος μπλοκ */


}

Παράδειγμα κύλισης div

Κώδικας HTML και CSS

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