interface Web
tutoriel CSS
Comment changer la position de la barre de défilement en utilisant CSS ?
Comment changer la position de la barre de défilement en utilisant CSS ?
Les barres de défilement font référence à des éléments qui permettent aux utilisateurs de faire défiler le contenu Web. Il apparaît généralement sous la forme d'une barre horizontale ou verticale sur le côté ou en bas de la page. La barre de défilement est également appelée « pouce de la barre de défilement » et constitue la partie de la barre de défilement qui se déplace lorsque l'utilisateur fait défiler vers le haut ou vers le bas.
Dans cet article, nous verrons comment modifier la position des barres de défilement à l'aide de CSS. Nous aborderons les sujets suivants -
Créez une nouvelle classe pour l'élément
Positionnement des barres de défilement et des pouces
Utilisez la propriété "position" pour changer la position de la barre de défilement
Créez une nouvelle classe pour l'élément
Tout d'abord, nous devons créer une nouvelle classe en CSS pour l'élément dont nous voulons modifier la position de la barre de défilement. Par exemple, si nous voulons changer la position de la barre de défilement d'un div avec la classe "scrollablediv", nous créerons la classe suivante en CSS -
.scrollable-div {
CSS Code…….
}
::-webkit-scrollbar {
width: 5px;
background-color: #F5F5F5;
}Cette classe ciblera la barre de défilement de l'élément "scrollable-div" et définira la largeur sur 5 pixels et la couleur d'arrière-plan sur gris clair.
Positionnez le pouce de la barre de défilement
Dans cette étape, notre cible est le pouce de la barre de défilement. Le pouce est la partie de la barre de défilement qui bouge lorsque l'utilisateur fait défiler. Nous ferons cela en ajoutant le code suivant à la classe CSS -
::-webkit-scrollbar-thumb {
background-color: #000000;
}Cela changera la couleur de votre pouce en noir.
Utilisez la propriété "position" pour changer la position de la barre de défilement
Dans la dernière étape, nous modifierons la position de la barre de défilement en utilisant la propriété "position". Par exemple, si nous voulions positionner la barre de défilement à gauche de l'élément "scrollable-div", nous utiliserions le code suivant -
.scrollable-div::-webkit-scrollbar {
position: absolute;
left: 0;
}Cela positionnera la barre de défilement à gauche de l'élément "scrollable-div".
Exemple
Cet exemple place la barre de défilement à gauche de l'élément div.
<html>
<title>The scroll bar on the left-hand side of the div element</title>
<head>
<style>
body{
text-align:center;
}
.scrollable-div{
height: 150px;
width: 250px;
overflow-y: auto;
background-color:pink;
margin:auto;
padding:5px;
transform: rotate(180deg);
}
.scrollable-div-inside {
transform: rotate(-180deg);
}
.scrollable-div::-webkit-scrollbar {
width: 5px; /* Set the width of the scrollbar */
background-color: #F5F5F5; /* Set the background color of the scrollbar */
position: absolute;
right: 0; /* Position the scrollbar on the right of the element*/
}
.scrollable-div::-webkit-scrollbar-thumb {
background-color: #000000; /* Set the color of the thumb */
}
::-webkit-scrollbar-track {
background: red;
border-radius: 5px;
}
</style>
</head>
<body>
<h3 id="The-scroll-bar-on-the-Left-side-of-the-div-element">The scroll bar on the Left side of the div element</h3>
<div class="scrollable-div">
<div class="scrollable-div-inside">Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
</body>
</html>
Exemple
Cet exemple place la barre de défilement à droite de l'élément div.
<html>
<title>The scroll bar on the right-hand side of the div element</title>
<head>
<style>
body{
text-align:center;
}
.scrollable-div{
height: 150px;
width: 250px;
overflow-x: auto;
background-color:pink;
margin:auto;
padding:5px;
}
.scrollable-div::-webkit-scrollbar {
width: 5px; /* Set the width of the scrollbar */
background-color: #F5F5F5; /* Set the background color of the scrollbar */
position: absolute;
left: 0; /* Position the scrollbar on the left of the element */
}
.scrollable-div::-webkit-scrollbar-thumb {
background-color: #000000; /* Set the color of the thumb */
}
::-webkit-scrollbar-track {
background: red;
border-radius: 5px;
}
</style>
</head>
<body>
<h3 id="The-scroll-bar-on-the-right-side-of-the-div-element">The scroll bar on the right side of the div element</h3>
<div class="scrollable-div">Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
</body>
</html>
Conclusion
Changer la position de la barre de défilement à l'aide de CSS est un processus simple et peut être effectué en créant une nouvelle classe pour l'élément, en positionnant la barre de défilement et le curseur, puis en utilisant la propriété "position" pour changer la position de la barre de défilement. . Avec un peu de connaissances CSS et quelques expérimentations, nous pouvons créer un look personnalisé unique pour notre site Web.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Faire votre première transition Svelte personnalisée
Mar 15, 2025 am 11:08 AM
L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Show, ne dit pas
Mar 16, 2025 am 11:49 AM
Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Créer votre propre bragdoc avec Eleventy
Mar 18, 2025 am 11:23 AM
Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Utilisons (x, x, x, x) pour parler de spécificité
Mar 24, 2025 am 10:37 AM
Je discutais avec Eric Meyer l'autre jour et je me suis souvenu d'une histoire d'Eric Meyer de mes années de formation. J'ai écrit un article de blog sur la spécificité CSS, et
