Comment personnaliser le style de la barre de défilement en CSS3
Comment personnaliser le style de la barre de défilement en CSS3 : créez d'abord un exemple de fichier HTML ; puis générez une barre de défilement en définissant "overflow:scroll" sur l'élément et enfin re-personnalisez le défilement en définissant chaque valeur de ; l'attribut de barre de défilement Bar style est suffisant.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
En CSS3, vous pouvez générer une barre de défilement en définissant overflow:scroll jusqu'à l'élément, puis re-personnaliser le style de la barre de défilement en définissant chaque valeur dans l'attribut scrollbar
Scroll les barres sont indispensables dans les navigateurs Indispensables, généralement un site Web avec des barres de défilement uniques est plus accrocheur et donne au site Web un aspect différent. Nous pouvons utiliser le plug-in jQuery pour implémenter des barres de défilement personnalisées. Nous pouvons également utiliser CSS3 pour créer nos propres barres de défilement. Dans l'article suivant, nous présenterons en détail comment utiliser CSS3 pour créer des barres de défilement personnalisées
attribut overflow :
Principalement utilisé pour définir le style lorsque le contenu déborde (si afficher les barres de défilement au-delà de la limite)overflow-x : Paramètres lorsque le contenu déborde dans le direction horizontale
<style type="text/css">
.scrollbar {
background-color: #F5F5F5;
height: 300px;
width: 65px;
margin: 100px auto;
overflow-y: scroll;//设置滚动条
}
.overflow {
height: 450px;
}
</style>
</head>
<body>
<div class="scrollbar" id="style-1">
<div class="overflow"></div>
</div>[Cours recommandé : Tutoriel CSS3]
Rendu :
attribut de la barre de défilement :
scrollbar-face-color : La couleur de la partie saillante de la barre de défilement tridimensionnelle scrollbar- arrow-color La couleur des flèches triangulaires sur les boutons haut et bas scrollbar-highlight-color : La couleur de la partie vide de la barre de défilementscrollbar-face-color:pink;
Style de barre de défilement personnalisé :
-webkit-scrollbar : la partie globale de la barre de défilement-webkit -scrollbar-button : boutons aux deux extrémités de la barre de défilement
-webkit-scrollbar -track : Piste externe
-webkit-scrollbar-track-piece : Piste intérieure, partie centrale de la barre de défilement (supprimée)
-webkit-scrollbar-thumb : Barre de déplacement
-webkit-scrollbar- corner : Coin
-webkit-resizer : Définissez le style du bloc de déplacement dans le coin inférieur droit
<style type="text/css">
.scrollbar {
background-color: #F5F5F5;
height: 300px;
width: 65px;
margin: 100px auto;
overflow-y: scroll;
}
.overflow {
height: 450px;
}
/*滚动条区域*/
#demo::-webkit-scrollbar{
width:20px;
background-color:#fff;
}
/*滚动条*/
#demo::-webkit-scrollbar-thumb{
background-color:#f196c4b3;
}
/*滚动条外层轨道*/
#demo::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px ;
background-color:pink;
border-radius: 10px;
}
</style>
}
</head>
<body>
<div class="scrollbar" id="demo">
<div class="overflow"></div>
</div>
</body>
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
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
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)
Sujets chauds
1666
14
1425
52
1327
25
1273
29
1252
24
Microsoft apporte les barres de défilement Fluent de Windows 11 à Google Chrome
Apr 14, 2023 am 10:52 AM
Contrairement à Windows 10, Windows 11 propose de nouvelles « barres de défilement fluides » modernes qui changent de forme lorsque les utilisateurs interagissent avec elles. Les barres de défilement Fluent sont de nature dynamique, elles évoluent automatiquement selon différents facteurs de forme ou lorsque vous modifiez la taille de la fenêtre, et elles sont actuellement utilisées dans des applications telles que Paramètres, Lecteurs multimédias, etc. Google Chrome pourrait bientôt disposer d'une fonctionnalité de barre de défilement fluide, selon une nouvelle proposition de Microsoft. Microsoft déclare dans une proposition vouloir moderniser les anciennes barres de défilement dans Chrome
Comment masquer le défilement de la barre de défilement en réaction
Dec 21, 2022 pm 03:38 PM
Comment masquer le défilement de la barre de défilement dans React : 1. Ouvrez le fichier "react-native" correspondant ; 2. Définissez le défilement horizontal jusqu'à l'horizontale ; 3. Masquez la barre de défilement horizontale en définissant la valeur de "showsHorizontalScrollIndicator" sur "false".
Comment définir la barre de défilement pour qu'elle s'affiche toujours sur le système Mac - Comment définir la barre de défilement pour qu'elle s'affiche toujours
Mar 18, 2024 pm 06:22 PM
Récemment, certains amis ont consulté l'éditeur sur la façon de configurer la barre de défilement du système Mac pour qu'elle soit toujours affichée. Ce qui suit vous présentera la méthode pour configurer la barre de défilement du système Mac pour qu'elle soit toujours affichée. Les amis dans le besoin peuvent venir apprendre. plus. Étape 1 : Dans le menu Démarrer du système, sélectionnez l'option [Préférences Système]. Étape 3 : Sur la page Préférences Système, sélectionnez l'option [Général]. Étape 3 : Sur la page générale, sélectionnez [Toujours] pour afficher les barres de défilement.
Comment activer ou désactiver les barres de défilement toujours affichées dans Windows 11 ?
Apr 24, 2023 pm 05:58 PM
Le système d'exploitation Windows permet aux utilisateurs de spécifier si les barres de défilement doivent être automatiquement masquées lorsqu'elles sont inactives ou non utilisées. Windows, en revanche, active les barres de défilement par défaut. Si un utilisateur souhaite activer ou désactiver cette fonctionnalité sur son système, veuillez vous référer à cet article pour l'aider à savoir comment procéder. Comment activer ou désactiver les barres de défilement toujours actives dans Windows 11 1. En appuyant longuement sur les touches Windows+U, vous ouvrirez la page Accessibilité sur votre système. 2. Sélectionnez l'effet visuel en cliquant dessus, il se situe en haut de la page Accessibilité. 3. Si vous souhaitez activer la fonctionnalité Toujours afficher les barres de défilement sur votre système, cliquez sur le bouton bascule Toujours afficher les barres de défilement pour l'activer comme indiqué ci-dessous. 4. Vous pouvez toujours montrer
Comment coder une zone de texte avec barre de défilement HTML
Feb 19, 2024 pm 07:38 PM
Titre : Comment écrire du code de zone de texte HTML avec des barres de défilement. La zone de texte en HTML est l'un des contrôles de saisie utilisateur couramment utilisés. Dans certains cas, lorsque le contenu du texte est trop long, la zone de texte s'affiche de manière incomplète. À ce stade, nous pouvons ajouter une barre de défilement à la zone de texte pour prendre en charge le défilement. Cet article présentera en détail comment écrire du code de zone de texte HTML avec effet de barre de défilement et donnera des exemples de code spécifiques. 1. Utilisez l'élément textarea pour créer une zone de texte. En HTML, nous utilisons l'élément textarea pour créer une zone de texte.
Comment faire défiler plus facilement sur Mac en affichant toujours les barres de défilement
Apr 17, 2023 am 08:31 AM
Comment définir les barres de défilement pour qu'elles soient toujours visibles Dans les versions modernes de MacOS, à partir de Ventura 13.0, vous pouvez définir les barres de défilement pour qu'elles soient toujours visibles en procédant comme suit : Allez dans le menu Pomme et sélectionnez « Paramètres système » Allez dans « Apparence » " Recherchez « Afficher les barres de défilement » et sélectionnez le commutateur à côté de « Toujours ». Plus besoin de deviner, vous pouvez instantanément voir visuellement où vous pouvez et ne pouvez pas faire défiler.
Comment créer une barre de défilement HTML
Feb 22, 2024 pm 03:24 PM
Comment créer une barre de défilement HTML nécessite des exemples de code spécifiques. Dans la conception Web, la barre de défilement est un élément courant qui permet de faire défiler facilement la page Web lorsqu'il y a trop de contenu. Cet article explique comment créer des barres de défilement à l'aide de HTML et fournit des exemples de code spécifiques. Tout d’abord, nous devons comprendre les principes de base de la création de barres de défilement en HTML. Les styles CSS peuvent être utilisés en HTML pour contrôler l'apparence et le comportement des barres de défilement. Plus précisément, nous pouvons utiliser les propriétés CSS pour définir la barre de défilement. Les propriétés couramment utilisées incluent o.
Comment réaliser que la barre de défilement n'occupe pas la hauteur en CSS
Feb 01, 2023 am 09:27 AM
Comment implémenter des barres de défilement en CSS sans occuper de hauteur : 1. Ouvrez le fichier HTML correspondant ; 2. Recherchez le code original "overflow-x: auto;" 3. Modifiez la valeur dans l'attribut "overflow-x: auto;" à " overflow-x: overlay; " peut empêcher la barre de défilement d'occuper la position.
