Εισαγωγή στους πόντους προσγείωσης CSS CSS

ο CSS Module Snap Snap είναι ένα πρότυπο ιστού που μας δίνει κάποιο έλεγχο κύλιση σε μια ιστοσελίδα έτσι ώστε να μπορούμε να κάνουμε τους χρήστες να μετακινηθούν σε συγκεκριμένα τμήματα μιας σελίδας και όχι μόνο σε οποιοδήποτε μέρος της.

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

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

Κύλιση χωρίς σημεία κύλισης

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

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

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

Κύλιση με σημεία ασφάλισης κύλισης

Εδώ μπαίνουμε CSS σημεία κύλισης κύλισης. Το όνομα είναι αυτονόητο. είναι ένα πρότυπο CSS που μας επιτρέπει να τοποθετήστε τα αντικείμενα στη θέση τους κατά την κύλιση.

Υπάρχουν πέντε ιδιότητες CSS που αποτελούν αυτό το πρότυπο:

1. κύλιση-snap τύπου
2. scroll-snap-points-x
3. scroll-snap-points-y
4. συντονισμός κύλισης
5. scroll-snap-destination

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

Οι ιδιότητες χρειάζομαι -webkit και -Κυρία προθέματα για τα σχετικά προγράμματα περιήγησης. Από τη σύνταξη αυτού του άρθρου, το κουδούνισμα κύλισης CSS δεν υποστηρίζεται από το Chrome και την Opera.

Λάβετε υπόψη ότι οι τελευταίες τέσσερις ιδιότητες ενδέχεται να πέσουν από τους πράκτορες χρήστη στο εγγύς μέλλον. αντι αυτου, νέες ιδιότητες, και συγκεκριμένα ευθυγράμμιση κύλισης, περιθώριο κύλισης, και κύλινδρος-pad-padding, μπορεί να δημιουργηθεί, όπως ορίζεται στην παρούσα προδιαγραφή.

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

Ιδιότητες

Πρέπει να το κάνετε πρόσθεσε το κύλιση-snap τύπου ιδιοκτησίας στο δοχείο κύλισης (το στοιχείο του δοχείου του οποίου τα παιδιά ξεχειλίζουν κατά τη διάρκεια της κύλισης). Καθορίζει το αυστηρότητα της άμεσης δράσης. Μπορεί να πάρει τρεις τιμές:

1. επιτακτικός - όταν ολοκληρωθεί η κύλιση, η κύλιση θα γίνει σπρώξτε σε ένα σχετικό σημείο ασφάλισης
2. εγγύτητα - λιγότερο αυστηρή από επιτακτικός. θα εξαρτάται από την κρίση του UA αν το στοιχείο θα κουμπώσει σε ένα δεδομένο σημείο αποκοπής
3. κανένας - δεν γίνεται σφάλμα

ο scroll-snap-points-x και scroll-snap-points-y ιδιότητες ανήκουν στο δοχείο κύλισης, πολύ. Αναφέρονται σε σημεία στον άξονα x και y όπου θα υπάρχουν τα σημεία ασφάλισης. Η αξία τους είναι που δόθηκε από το επαναλαμβάνω() λειτουργία. Για παράδειγμα, αν θέλετε να προσθέσετε σημεία συμπλοκής κατά μήκος του άξονα x στο διάστημα από 100px πρέπει να χρησιμοποιήσετε το scroll-snap-points-x: επανάληψη (100px) κανόνας.

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

Μπορείτε να χρησιμοποιήσετε το συντονισμός κύλισης ιδιοκτησία σε συνδυασμό με scroll-snap-destination. Πρέπει να το προσθέσετε στα παιδικά στοιχεία του κοντέινερ. Το ορίζει τις συντεταγμένες των παιδικών στοιχείων, που θα ευθυγραμμιστούν με τις συντεταγμένες προορισμού του δοχείου κύλισης όταν ο χρήστης μετακινηθεί στην οθόνη.

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

Παράδειγμα κώδικα

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

 div πλάτος: 300px; ύψος: 300px; υπερχείλιση: αυτόματη · ... div> img width: 250px; ύψος: 150px; ... 

Τώρα εμείς προσθέστε μερικά σημεία στο δοχείο κύλισης:

 div πλάτος: 300px; υπερχείλιση: αυτόματη; scroll-snap-points-y: επανάληψη (150px); Τύπος κύλισης: υποχρεωτική.  

Παρακάτω, μπορείτε να δείτε πώς μοιάζει με την έξοδο Πρόσθετα σημεία προσθήκης CSS. Παρατηρήστε όποτε η κύλιση σταματά ενώ η κάτω εικόνα είναι ορατή μόνο μερικώς εμφανίζεται πλήρης εικόνα αφού το scrollport σπάσει σε ένα σημείο απότομης στροφής πάνω από αυτό.