Couleur de la barre de défilement

Une barre de défilement est une barre mobile, généralement située tout à droite ou en bas de votre écran. Une barre de défilement est montée horizontalement ou verticalement, permettant à l'utilisateur de déplacer la fenêtre de haut en bas ou de droite à gauche. En d’autres termes, la barre de défilement est un widget ou une technique qui crée une interaction entre l’utilisateur et la fenêtre d’affichage du système, qui fait défiler une image continue ou un texte ou tout type d’affichage. La barre de défilement contient une « BARRE » ou communément appelée « PISTE », et cette barre a un « POUCE » qui est utilisé pour déplacer le contenu de la fenêtre, de haut en bas ou de droite à gauche. Dans cette rubrique, nous allons en apprendre davantage sur la couleur de la barre de défilement.

En général, la barre de défilement que vous trouvez est généralement en forme de bloc et de couleur grise. Mais la couleur par défaut et d'autres propriétés des barres de défilement peuvent être manipulées et personnalisées à l'aide de CSS ou de JavaScript, ou des deux.

Dans les sections à venir, nous essaierons de créer des barres de défilement manipulées à l'aide de CSS et Javascript.

Personnalisation de la couleur de la barre de défilement

La propriété color permet simplement de définir une couleur différente, autre que le gris par défaut pour le « pouce » et la couleur habituelle de la piste. Nous savons tous que la couleur de la zone d'arrière-plan de la barre de défilement (qui est généralement fixe quelle que soit la direction dans laquelle l'utilisateur fait défiler) est connue sous le nom de « PISTE ». Et la partie mobile, qui défile en même temps que la fenêtre de défilement, elle flotte sur la piste, s'appelle le « POUCE ».

Vous trouverez ci-dessous un exemple visuel expliquant la piste et le pouce.

L'image ci-dessus est une simple représentation d'une page Web avec des informations débordées. L'utilisateur doit cliquer sur le pouce et le faire glisser de haut en bas pour afficher les informations complètes.

La barre de défilement visible dans l'image ci-dessus est une barre de défilement basée sur le navigateur par défaut avec ses valeurs par défaut. Nous parlons sans cesse de valeurs par défaut ; voyons-les aussi.

•  : Définit la couleur de votre barre de défilement et les valeurs par défaut qu'elle porte comme ci-dessous :
• auto : 'auto' est la propriété par défaut de la piste de la barre de défilement si le programmeur n'a donné aucune couleur ou propriété spécifique.
• dark : la propriété 'dark', lorsqu'elle est fournie, affiche une barre de défilement sombre qui peut être l'une des nuances les plus sombres de la couleur fournie par votre navigateur ou votre plateforme ou la nuance la plus foncée de la couleur définie par toi.
• light : la propriété « light » affiche la teinte plus claire de la couleur fournie par la plate-forme ou la couleur que vous avez définie pour la barre de défilement.
•  : La première couleur représente la couleur du pouce de la barre de défilement et la deuxième couleur représente la couleur de la piste.

La L'inconvénient de propriété est limité et uniquement pris en charge sur les navigateurs dotés d'une version spécifique et supérieure. Par exemple, la propriété est prise en charge par Chrome à partir de la version 81, de même par Firefox à partir de la version 72, et ainsi de suite. Pour éviter cela, nous utilisons une autre propriété appelée propriétés « -webkit- ».

Les navigateurs tels qu'Opera, Chrome, Safari sont des navigateurs -webkit- et supportent donc le pseudo-élément non standard appelé élément « :: -webkit-scrollbar », qui nous permet d'apporter facilement des modifications à notre barre de défilement. quels que soient les navigateurs.

Les propriétés sont définies sur « auto » par défaut, ce qui, lorsqu'elles sont manipulées, peut créer des visuels vraiment intéressants. Ces éléments sont ajoutés en haut de votre code (voir ci-dessous) dans la zone pour personnaliser les propriétés de la barre de défilement par défaut du navigateur.

Exemples de couleur de la barre de défilement

Nous avons créé l'exemple suivant d'une simple barre de défilement d'une largeur de 18 pixels. Nous lui avons donné une couleur jaune avec une barre ou une poignée verte feuillue.

<style>
/* width */
::-webkit-scrollbar {
width: 18px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f120;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #881;
}
</style>

Une propriété supplémentaire peut être ajoutée à la barre ou à la poignée, « ::-webkit-scrollbar-thumb:hover », ce qui vous aide à définir une couleur différente pour votre barre de défilement lorsqu'elle est survolée.

Pour ajouter une propriété « survol » à notre barre ou poignée, il nous suffit d'ajouter les lignes de code suivantes à notre script ;

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #520;
}

Et le résultat peut être vu dans la capture d'écran ci-dessous :

Notre barre de couleur vert feuillu est devenue marron lorsqu'on la survole.

Voyons un autre exemple d'exploration de plus de propriétés. Dans l'exemple suivant, nous avons lissé notre barre et le pouce à l'aide de la propriété border radius. Ce qui est intéressant est de créer des boutons permettant aux utilisateurs de déplacer facilement la barre sur la piste en cliquant sur les boutons au lieu de faire glisser la barre.

Nous avons ajouté le code ci-dessous pour créer notre propre bouton personnalisé :

/* Custom Button */
::-webkit-scrollbar-button:single-button {
background-color:none;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}

The above will simply display the area with a border where our buttons will appear, as shown below. This will need some customization as well.

After our customization (see the code added) is done, we get the final result. See the results for yourselves:

Complete code is given below:

<head>
<style>
/* Custom width for the Scrollbar */
::-webkit-scrollbar {
width: 18px;
}
/* Custom Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
background: #f1f120;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #881;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #520;
}
/* Custom Button */
::-webkit-scrollbar-button:single-button {
background-color:none;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}
/* Custom Up Direction Button */
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0px 8px 9px 8px;
border-color: transparent #881;
border-radius: 10px;
}
/* Custom Down Direction Button */
::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 0px 8px 9px 8px;
border-color: transparent #881;
border-radius: 10px;
}
</style>
</head>

SimpleBar: A JavaScript Library

There is always another way to implement elements in your project. A custom scroll bar can also be added with the help of jquery plugins and javascript libraries, popular in the web market. For example, SimpleBar is the new Javascript library that makes it easier for the author to create customized scrollbars.

It’s a standalone library that adds a scroll bar to any scrollable element or component, or container which might have overflowing content. This javascript library makes your content dynamic and keeps the native scroll behavior. A simple demo is shown below.

Customization

You can easily use these javascript libraries by installing and importing them into your projects or directly including them and their CSS files (if any) on to your HTML page. In the below example, we will be using the second option, directly including a javascript library into our program.

<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
<strong> </strong><script src="https://unpkg.com/simplebar@latest/dist/simplebar.js"></script>

Adding these two lines to your HTML page will include and attach a remote file that can not be edited to your HTML like this; Next, we will add, ‘data-simplebar’ attribute to the division or the content, which will be the scrollable container of your HTML page. In our example, we added this attribute to the tag itself. Along with this, we will require a sample text; I have added ‘Lorem Ipsum’ default text to our tag to make the web page scrollable. And that is it. Simple right? When this is all done, your web page will look like this –> But it’s still raw and a bit ugly. I have done a few tweaks, as shown below, and see the results for your selves. The full code for CSS is given below, along with the results.

<style>
:root {  --primary: #212123;
}
body, html{          height: 100vh;
}
body{      background: var(--primary);
font-family:Georgia, "Times New Roman", Times, serif;
color: #fff;
display:grid;
grid-columns:60% auto;
margin: 0;
}
p{                            margin: 1em;
padding: 1em;
background-color: #333;
border-radius:10px;
color: #99F;
}
h2 {         color: #996;
}
.simplebar-scrollbar:before{background-color:#0F0;
}
.simplebar-scrollbar{margin-right:3px;
}
</style>

And the result is, as you can see below;

You can manually configure the javascript libraries as well, but then you need to initialize them first and then configure them; an option is known as ‘override’ is used, passing the object as a parameter of our Simplebar Function.

You can design it as you want since this library is lightweight. It has a simplebar.js file, a vanilla javascript custom scroll bar plugin that ensures great performance and works with all browsers.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!