Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Γρήγορη Συμβουλή: Μορφοποίηση Μπαρών Κύλισης για να Ταιριάζουν με το Σχεδιασμό του UI Σας

by
Length:LongLanguages:

Greek (ελληνικά) translation by Iris Diakoumi (you can also view the original English article)

Αυτή η συμβουλή θα σας καθοδηγήσει στη βελτίωση της εμφάνισης και της αίσθησης των μπαρών κύλισης για να ταιριάζουν με το σχεδιασμό UI σας. Θα ρίξουμε μια ματιά στο τί μας προσφέρουν από την άποψη του CSS τα διάφορα προγράμματα περιήγησης WebKit, και θα χρησιμοποιήσουμε μια εναλλακτική με jQuery για να το κάνουμε να δουλέψει για άλλους browsers.

Ψάχνετε μια γρήγορη λύση;

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

Web component services on Envato Studio

Μια Γρήγορη Σημείωση για τους Browsers

Όταν αναφερόμαστε σε browsers βασισμένους σε Webkit ουσιαστικά μιλάμε για το Apple Safari και Google Chrome. Αυτοί οι δύο μαζί έχουν το 40% όλης της αγοράς των desktop browsers. Για tablet, το iPad της Apple χρησιμοποιεί πάντα Webkit, δεν έχει σημασία ποιάς εταιρείας ο browser χρησιμοποιείται. Η Google επίσης πρόσθεσε τον Chrome για το Android OS και τα Chromebooks βασίζονται, φυσικά, στο Google Chrome.

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


Βήμα 1: Μια απλή σελίδα με μπάρες κύλισης

Πριν ξεκινήσουμε με το πραγματικό θέμα του styling μπάρας κύλισης με CSS, χρειαζόμαστε ένα λειτουργικό demo, μια σελίδα με γραμμές κύλισης. Μπάρες κύλισης μπορούν να εμφανιστούν αν:

  • Τα περιεχόμενα είναι μεγαλύτερα από την ορατή περιοχή του παραθύρου (μια μπάρα κύλισης θα εμφανιστεί στα δεξιά).
  • Μια textarea περιέχει αρκετό κείμενο ώστε να εμφανιστούν μπάρες κύλισης.
  • Ένα iframe χρησιμοποιείται για να εμφανίσει μια διαφορετική σελίδα.
  • Ένα div ή κάποιο άλλο block element έχει ορισμένη την ιδιότητα overflow.

Για τους σκοπούς αυτού του demo θα δείξουμε την τελευταία επιλογή. Αυτός είναι ο αρχικός μου κώδικας:

Είναι απλά ένα div με αρκετό ενδεικτικό περιεχόμενο. Και αυτό είναι το αρχικό CSS, που ορίζει μερικές στατικές διαστάσεις και αρχικοποιεί οριζόντιες και κάθετες μπάρες κύλισης:

Θα πρέπει να μπορείτε να δείτε κάτι παρόμοιο με αυτό:


Βήμα 2: Ξεκινώντας με τους Webkit Browsers

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

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

Όταν αυτό το ψευδο-στοιχείο είναι παρόν, το WebKit θα απενεργοποιήσει τον ενσωματωμένο τρόπο εμφάνισης της μπάρας κύλισης και θα χρησιμοποιήσει μόνο τις πληροφορίες που δίνονται στο CSS. - Surfin' Safari

Και τώρα μερικά ακόμα ψευδο-στοιχεία:

Μετά την προσθήκη αυτού του CSS θα πρέπει να μπορείτε να δείτε το ακόλουθο αποτέλεσμα (και πάλι, μόνο σε Webkit browsers).

Μαντέψτε! Ο Internet Explorer έχει τη δική του μορφοποίηση μπάρας κύλισης!

Σωστά! - για την ακρίβεια, ο IE ήταν το πρώτο πρόγραμμα περιήγησης που υποστήριξε μορφοποίηση μπάρας κύλισης μέσω CSS. Αυτό ίσχυε την εποχή του IE 5.5, αλλά μπορούσε να αλλάξει μόνο το χρώμα.

Αυτές οι ιδιότητες μπορούν ακόμα να χρησιμοποιηθεί σήμερα. Ρίξτε μια ματιά σε αυτήν μόνο την ιδιότητα σε IE 9 για σκοπούς επίδειξης:

Δείτε πώς θα φαίνεται:


Βήμα 3: Εναλλακτική για Browsers μη-Webkit

Αρκετά με το WebKit. Οι IE, Firefox και Opera μπορούν επίσης να μπουν στο παιχνίδι . Για αυτούς έχουμε μία πολύ ωραία εναλλακτική προσέγγιση με τη μορφή του jScrollPane. Αυτό το plugin jQuery έχει αναπτυχθεί από τον Kelvin Luck και θα είναι σωτήριο για αυτήν τη διαδικασία.

Η ιστοσελίδα του Kelvin έχει πολλά καλά παραδείγματα, αλλά για βασική χρήση το μόνο που πρέπει να κάνουμε είναι να κατεβάσουμε το jQuery και τα αρχεία jScrollPane και να τα υλοποιήσουμε με τον ακόλουθο τρόπο:

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

Εδώ είναι ένα screenshot του τί θα δείτε στον Firefox:


Συμπέρασμα

Διαδικτυακές Εφαρμογές όπως το Gmail και το Google+ (μαζί με άλλα παραδείγματα) έχουν ήδη ενστερνιστεί την ιδέα και αν αυτή η δυναμική συνεχιστεί, ίσως οι Firefox και IE να παρέχουν τις δικές τους λύσεις.

Ελπίζω να απολαύσατε αυτή τη Γρήγορη Συμβουλή και ανυπομονώ να δω τί θα κάνετε με τις μπάρες κύλισης στο σχεδιαστικό σας έργο!


Περισσότερες Πηγές

Παραμετροποιώντας Μπάρες Κύλισης στην Αγορά Envato

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

1. Lazybars - Παραμετροποιήσιμο jQuery plugin για responsive μπάρες κύλισης 

Το Lazybars είναι ένα εύκολο στη χρήση, παραμετροποιήσιμο jQuery plugin για μπάρες κύλισης. Μπορείτε να εφαρμόσετε αυτές τις μπάρες κύλισης απλά προσθέτοντας ένα όνομα κλάσης σε κάθε κυλιόμενο στοιχείο στην ιστοσελίδα σας.

Χρησιμοποιήστε τα θέματα που έρχονται μαζί με το Lazybars, ή δημιουργήστε το δικό σας με μερικές απλές γραμμές CSS.

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - Παραμετροποιήσιμο jQuery plugin για responsive μπάρες κύλισης 

2. Fancy Scrollbar - WordPress

Το «Fancy Scrollbar– WordPress» είναι ένα plugin που μπορεί να δημιουργήσει μια προσαρμοσμένη μπάρα κύλισης σε ιστοσελίδες WordPress. Έχει πολλές επιλογές προσαρμογής. Μπορείτε να προσαρμόσετε το χρώμα, εφέ, καθυστέρηση κύλισης, rail strip και πολλές ακόμα παραμέτρους.

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

Το Awesome Custom Scrollbar είναι ένα ιδιαίτερα προσαρμόσιμο jQuery plugin για παραμετροποιημένες μπάρες κύλισης για τη WordPress ιστοσελίδα σας. Με αυτό το plugin μπορείτε να προσαρμόσετε την μπάρα κύλισης της ιστοσελίδα σας, και μπορείτε να ενσωματώσετε το Custom Scrollbar μέσω shortcode οπουδήποτε θέλετε, ακόμα και μέσα σε αρχεία θέματος.

Awesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

Το DZS Scroller παρέχει μια μπάρα κύλισης για το site σας που μπορείτε να προσαρμόσετε εύκολα μέσω CSS εάν τα τρία θέματα που περιλαμβάνονται δεν είναι αρκετά. Έρχεται επίσης με βελτιωμένη λειτουργικότητα όπως κύλιση με hover ή fade on mouse leave. Και λειτουργεί στο iPhone/iPad.

DZS Scroller
DZS Scroller

5. CSS3 Scrollbar Styles

Είναι εύκολο να χρησιμοποιήσετε τo όμορφο και πολύχρωμο CSS3 Scrollbar στην ιστοσελίδα σας. Απλά τοποθετήστε το υπάρχον αρχείο CSS και απολαύστε τη νέα μπάρα κύλισης CSS3 Scrollbar.

CSS3 Scrollbar Styles
CSS3 Scrollbar Styles
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.