ChercherΗλεκτρονική Από τον συγγραφέα:στον ιστότοπο Κοινό, όπου του αρέσει να γράφει στυλ σε 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 - Κληρονομεί την αξία του γονέα.

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

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

Κώδικας HTML

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

) .VisibleDiv (υπερχείλιση:ορατή;) .HiddenDiv (υπερχείλιση:κρυφή;).ScrollDiv (υπερχείλιση:κύλιση;).AutoDiv (υπερχείλιση:αυτόματη;)

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

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

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

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

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

Στην πρώτη περίπτωση, είναι σαφές ότι το περιεχόμενο με την ιδιότητα float μετακινείται εκτός του μπλοκ και δεν λαμβάνεται υπόψη κατά τον προσδιορισμό του ύψους του μπλοκ, στη δεύτερη περίπτωση, κάτω από το μπλοκ με υπερχείλιση: ορατό ;

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

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

ορίζεται επίσης κάποια τιμή

Μπορείτε να χρησιμοποιήσετε το overflow-y: scroll για κατακόρυφη κύλιση.
Το Lorem Ipsum είναι απλώς εικονικό κείμενο της βιομηχανίας εκτύπωσης και στοιχειοθεσίας. Lorem Ipsum

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

χρησιμοποιώντας CSS

. Υπεύθυνος για αυτό ιδιότητα υπερχείλισηςΣχετικά με την ιδιότητα χρήσιμης υπερχείλισης Ιδιοκτησίαξεχείλισμα

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

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

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

Κωδικός CSS

Προκρούτκα (υπερχείλιση: αυτόματη; /* ιδιότητα για οριζόντια κύλιση. Αυτόματα εάν το περιεχόμενο είναι μεγαλύτερο από το μπλοκ */
ιδιότητες και τιμές υπερχείλισηςορατός
- εμφανίζεται ολόκληρο το περιεχόμενο του στοιχείου, ακόμη και εκτός του καθορισμένου πλάτους.κεκρυμμένος
- εμφανίζεται μόνο η περιοχή μέσα στο στοιχείο, τα υπόλοιπα είναι κρυφά.- προστίθεται αυτόματα οριζόντια λωρίδακύλιση εάν το μπλοκ είναι μικρότερο.

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

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

υπερχείλιση-υ
πλάτος: 150 px; /* πλάτος του μπλοκ μας */
ύψος: 100 px; /* ύψος του μπλοκ μας */


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

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

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

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

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


}

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

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

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