Share
Cette astuce vous guidera dans l'amélioration de l'aspect et de la convivialité des barres de défilement pour correspondre à la conception de votre interface utilisateur. Nous allons examiner ce que les navigateurs WebKit nous proposent en termes de CSS et utiliser un repli jQuery pour prendre en charge d’autres navigateurs..
Si vous avez besoin d'aide pour personnaliser un composant de votre site Web, il peut être plus rapide d'obtenir l'aide d'un professionnel. Envato a des experts prêts à vous aider à modifier le style ou à personnaliser tous les types de composants Web..
Lorsque nous nous référons aux navigateurs Webkit, nous parlons essentiellement d’Apple Safari et de Google Chrome. Ensemble, ils détiennent actuellement plus de 40% du marché total des navigateurs de bureau. Pour les tablettes, l'iPad d'Apple utilisera toujours Webkit, quel que soit le navigateur utilisé par la société. Google a également ajouté Chrome à son système d'exploitation Android et les Chromebooks sont bien sûr basés sur Google Chrome.
En regardant ces chiffres, il devrait y avoir un avenir très brillant pour le style des barres de défilement!
Avant de pouvoir commencer avec le sujet actuel du style des barres de défilement avec CSS, nous avons besoin d’une démonstration fonctionnelle. une page avec des barres de défilement. Des barres de défilement peuvent être vues si:
Accentsconagua
zone de texte contient suffisamment de texte pour que les barres de défilement apparaissent.iframe est utilisé pour afficher une page différente.div ou tout autre élément de bloc a sa débordement ensemble de propriétés.Pour les besoins de cette démo, nous allons passer à la dernière option. Voici mon balisage initial:
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Curabitur rhoncus tortor eget orci fringilla aliquet non semper magna. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus Id nisl eu eros convallis eleifend. Dans hac habitasse platea dictumst. À Felis Massa. Mécènes vitae quam non élit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Mécènes assis amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Classe aptent taciti sociosqu ad litora torquent par conubia nostra, par inceptos himenaeos.
Sed sed tellus dolor, non lobortis felis. Classe aptent taciti sociosqu ad litora torquent par conubia nostra, par inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Vestibule aliquet Sed imperial. Curabitur viverra tortor augue, un aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu le tempo et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.
Présents sodales, sapien sit amet congue egestas, vergue fascia felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, conséquence conséquente. Cras elit orci, véhicules en sagittis, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Accidents Pour Er Quis Mi Luctus Porta.
Sed mollis justo enim, ut pharetra nunc. Fusce véhicula viverra magna et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, le cursus a commencé, il est triste sit amet tortor. Cras eleifend felis as aliquet amet eros véhicula. Pellentesque fringilla metus dans libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Aliquam conséquat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. Dans les ultrices vehicula pretium.
Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in en vit vitus metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. À propos de nous, je ne sais pas quoi, pas de frais, mais ce n'est pas tout. Aenean quis risus ante. Donec bibendum a créé un vestibule très simple avec des lectures de lecture. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada est célèbre pour son turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, placer du faucibus tincidunt vitae, véhicule chez libero.
C'est juste un div avec beaucoup de contenu factice. Et voici le CSS initial, qui définit des dimensions fixes et déclenche des barres de défilement horizontale et verticale:
.conteneur largeur: 400px; hauteur: 300px; couleur de fond: #DCDCDC; débordement: scroll; / * montrant les barres de défilement * /
Vous devriez pouvoir voir quelque chose de similaire à ceci:
Il y a quelques années déjà, des pseudo-éléments CSS ont été introduits dans les navigateurs Webkit pour cibler les barres de défilement, offrant ainsi la possibilité de styliser votre page en fonction de votre thème..
Stylons quelque chose en utilisant le -webkit- les propriétés personnalisées de la barre de défilement du préfixe et du webkit. N'oubliez pas que je m'en tiens aux propriétés CSS de base pour faciliter la compréhension, avec des explications dans les commentaires..
:: - webkit-scrollbar width: 15px; / * ceci cible la barre de défilement par défaut (obligatoire) * /
Lorsque ce pseudo-élément est présent, WebKit désactive le rendu de la barre de défilement intégré et utilise uniquement les informations fournies dans CSS. - Surfin 'Safari
Et maintenant, quelques autres pseudo-éléments:
:: - webkit-scrollbar-track background-color: # b46868; / * la nouvelle barre de défilement aura une apparence plate avec la couleur de fond définie * / :: - webkit-scrollbar-thumb background-color: rgba (0, 0, 0, 0.2); / * cela va styler le pouce, en ignorant la piste * / :: - webkit-scrollbar-button background-color: # 7c2929; / * éventuellement, vous pouvez styler les boutons du haut et du bas (gauche et droite pour les barres horizontales) * / :: - webkit-scrollbar-corner background-color: black; / * si les barres verticale et horizontale apparaissent, alors peut-être que le coin inférieur droit doit également être stylé * /
Après avoir ajouté ce CSS, vous devriez pouvoir voir l’effet suivant (encore une fois, seuls les navigateurs Webkit).
En effet, IE a été le premier navigateur à prendre en charge le style des barres de défilement via CSS. C'était à l'époque d'IE 5.5, mais seule la couleur peut être changée.
Ces propriétés peuvent encore être utilisées aujourd'hui; jetez un oeil à cette propriété unique sur IE 9 à des fins de démonstration:
body scrollbar-face-color: # b46868;
Voyez à quoi cela ressemblerait:
Assez parlé de WebKit. Firefox, IE et Opera peuvent également participer à l’amusement. Pour eux, nous avons une très belle approche de secours sous la forme de jScrollPane. Ce plugin jQuery est développé par Kelvin Luck et sera notre sauveur pour la journée.
Le site Web de Kelvin contient de nombreux bons exemples, mais pour une utilisation de base, tout ce que nous avons à faire est de télécharger jQuery et les fichiers jScrollPane et de les implémenter de la manière suivante:
Juste pour faire correspondre notre thème, ouvrons jquery.jscrollpane.css et éditez les lignes suivantes avec nos valeurs de couleur (pour améliorer les performances, vous pouvez placer tous les styles dans vos propres fichiers):
.jspTrack background: # b46868; / * changé de #dde * / position: relatif; .jspDrag background: rgba (0,0,0,0,2); / * changé de #bbd * / position: relatif; en haut: 0; gauche: 0; curseur: pointeur;
Voici une capture d'écran de ce que vous verrez dans Firefox:
Des applications Web comme Gmail et Google+ (ainsi que de nombreux autres exemples) ont déjà adopté l'idée et si cet élan se poursuit, peut-être que Firefox et IE fourniront également leurs propres solutions..
J'espère que vous avez apprécié ce petit conseil et j'ai hâte de voir ce que vous faites avec les barres de défilement dans votre travail de conception.!
Si vous recherchez une solution clé en main, Envato Market propose une sélection de barres de défilement que vous pouvez brancher sur votre site Web pour obtenir toute une gamme d’effets. Voici un aperçu de certains d'entre eux:
Lazybars est un plug-in jQuery à barre de défilement thématique facile à utiliser. Vous pouvez implémenter ces barres de défilement en ajoutant simplement un nom de classe à n’importe quel élément déroulant de votre site Web..
Utilisez les thèmes fournis avec Lazybars ou créez le vôtre avec du CSS simple.
Lazybars - Themeable responsive scrollbar plug-in jQuery“Fancy Scrollbar - WordPress” est un plugin qui permet de créer une barre de défilement personnalisée sur les sites WordPress. Il a beaucoup d'options de personnalisation. Vous pouvez personnaliser la couleur, les effets, le délai de défilement, la bande de rail et bien d’autres paramètres..
Barre de défilement fantaisie - WordPressAwesome Custom Scrollbar est un plugin jQuery à barre de défilement personnalisée hautement personnalisable pour votre site Web WordPress. Avec ce plugin, vous pouvez personnaliser votre barre de défilement de page Web et vous pouvez intégrer une barre de défilement personnalisée via un shortcode où vous le souhaitez, même dans des fichiers de thème..
Superbe barre de défilement personnaliséeDZS Scroller fournit une barre de défilement pour votre site que vous pouvez personnaliser très facilement via CSS si les trois skins fournis ne suffisent pas. Il est également doté de fonctionnalités améliorées telles que le défilement par survol ou la fermeture en fondu. Et ça marche sur iPhone / iPad.
DZS ScrollerIl est facile d'utiliser la belle et colorée barre de défilement CSS3 pour votre site Web. Insérez simplement dans le fichier CSS existant et profitez de la nouvelle barre de défilement CSS3.
Styles de barre de défilement CSS3
