Η κύλιση επιτρέπει στους χρήστες να προβάλλουν τις ιστοσελίδες/μεγάλα έγγραφα αριστερά και δεξιά ή πάνω και κάτω. Μπορεί να εκτελεστεί με την προσθήκη οριζόντιων και κάθετων γραμμών κύλισης ανάλογα με το περιεχόμενο. Οι διαστάσεις της γραμμής κύλισης, όπως το ύψος και το πλάτος, ορίζονται από προεπιλογή. Ωστόσο, αυτά μπορούν να προσαρμοστούν με τη βοήθεια των συσχετισμένων μεθόδων JavaScript. Μόλις μπορούν να προστεθούν ή να οριστούν στο έγγραφο, ο χρήστης μπορεί εύκολα να τα αναγνωρίσει χρησιμοποιώντας το ενσωματωμένο ' scrollTop() ', και το ' scrollLeft() μεθόδους.
Αυτή η ανάρτηση εξηγεί τον σκοπό και τη λειτουργικότητα της μεθόδου 'scrollLeft()' στο jQuery.
Τι είναι η μέθοδος “scrollLeft()” στο jQuery;
Ο ' scrollLeft() Η μέθοδος ” έχει σχεδιαστεί ειδικά για την οριζόντια γραμμή κύλισης να ορίζει και να ανακτά τη θέση της σε pixel. Υπολογίζει τη θέση της γραμμής κύλισης του επιλεγμένου στοιχείου HTML. Εφαρμόζεται κυρίως στα στοιχεία div, κοντέινερ και τομή.
Σύνταξη (Ορισμός θέσης οριζόντιας γραμμής κύλισης)
$ ( εκλέκτορας ) .scrollΑριστερά ( θέση )
Η παραπάνω σύνταξη παίρνει την ακέραια τιμή ως ' θέση όρισμα για να ορίσετε τη θέση της οριζόντιας γραμμής κύλισης του στοχευμένου επιλογέα.
Σύνταξη (Λήψη θέσης οριζόντιας γραμμής κύλισης)
$ ( εκλέκτορας ) .scrollΑριστερά ( )
Αυτή η σύνταξη επιστρέφει την τιμή του ορίσματος 'θέση' του επιλογέα σε pixel.
Ας χρησιμοποιήσουμε πρακτικά την καθορισμένη μέθοδο.
Κώδικας HTML
Αρχικά, ρίξτε μια ματιά στον αναφερόμενο κώδικα HTML:
< Ενότητα στυλ = 'Ύψος: 150 εικονοστοιχεία; πλάτος: 200 εικονοστοιχεία ; περιθώριο: αυτόματο; περίγραμμα: 2 εικονοστοιχεία συμπαγές μαύρο; υπερχείλιση: αυτόματη;λευκό διάστημα: nowrap;' >
< h2 > Καλώς ήρθατε στο Linuxhint ! h2 >
Ενότητα >
< κουμπί > Ρύθμιση θέσης κουμπί >
Στις παραπάνω γραμμές κώδικα:
- Ο ' <τμήμα> Η ετικέτα περιέχει μια ενότητα μέσα στο έγγραφο HTML προσαρμοσμένη με τη βοήθεια του χαρακτηριστικού 'style'.
- Μέσα στη δημιουργημένη ενότητα, το ' Η ετικέτα ορίζει την υπότιτλου.
- Τέλος, το « <κουμπί> Η ετικέτα προσθέτει ένα κουμπί.
Σημείωση: Ακολουθήστε τον κώδικα HTML που δίνεται σε όλα τα παραδείγματα αυτής της ανάρτησης.
Παράδειγμα 1: Εφαρμογή της μεθόδου 'scrollLeft()' για να ορίσετε τη θέση της γραμμής κύλισης (Οριζόντια)
Αυτό το παράδειγμα χρησιμοποιεί τη μέθοδο 'scrollLeft()' για να ορίσει τη γραμμή κύλισης (οριζόντια) στην καθορισμένη θέση.
Κωδικός jQuery
Ακολουθήστε τον δεδομένο κώδικα jQuery:
< γραφή src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' γραφή >< γραφή >
$ ( έγγραφο ) .έτοιμος ( λειτουργία ( ) {
$ ( 'κουμπί' ) .Κάντε κλικ ( λειτουργία ( ) {
$ ( 'Ενότητα' ) .scrollΑριστερά ( πενήντα ) ;
} ) ;
} ) ;
γραφή >
Σε αυτό το απόσπασμα κώδικα:
- Αρχικά, καθορίστε τη διαδρομή CDN της βιβλιοθήκης jQuery στο ' <σενάριο> 'Ετικέτα από την επίσημη ιστοσελίδα της' https://jquery.com/ ' με τη βοήθεια του ' src ' Χαρακτηριστικό.
- Στη συνέχεια, η δεύτερη ετικέτα '