Comment masquer le style de la barre de défilement en CSS

Dans la conception Web, masquer les barres de défilement est une exigence de style courante. Lorsque le contenu de la page Web est relativement simple ou qu'il est nécessaire d'obtenir un effet de glissement similaire à celui de l'interface APP, masquer la barre de défilement peut mieux améliorer l'expérience utilisateur. Grâce à la technologie CSS, nous pouvons facilement personnaliser le style de la barre de défilement.

1. Comment masquer la barre de défilement

1. Utilisez le code CSS

/ pour masquer la barre de défilement/
::-webkit-scrollbar {

display: none;

}

Dans ce code CSS, en définissant " display : none", nous pouvons empêcher l'affichage de la barre de défilement. Cependant, cette méthode n'est efficace que pour les navigateurs dotés du noyau WebKit (tels que Chrome, Safari, etc.), et il existe quelques problèmes de compatibilité.

2. Utilisez le code JavaScript

/Masquer la barre de défilement/
window.onload=function() {

//隐藏滚动条
document.documentElement.style.overflow='hidden';
document.body.style.overflow='hidden'; //针对火狐浏览器

//禁止滚动条滚动
document.documentElement.style.overflow='hidden';
document.body.style.overflow='hidden';

}

Avec le code JavaScript, nous pouvons utiliser "document.documentElement.style.overflow='hidden ' "Masquer les barres de défilement du navigateur. Cependant, cette méthode doit charger toutes les pages avant de pouvoir prendre effet et affectera la présentation de certains sites Web.

3. Utiliser la technologie des plug-ins

Pour certains concepteurs Web qui ne sont pas familiers avec des technologies telles que CSS ou JavaScript, vous pouvez envisager d'utiliser des plug-ins de barre de défilement tiers, tels que iScroll, perfect-scrollbar, nicescroll, etc. Ces plug-ins peuvent masquer les barres de défilement et embellir l'effet de glissement en ajoutant du code CSS ou JavaScript spécifique.

2. Comment embellir la barre de défilement

En plus de masquer la barre de défilement, nous pouvons également embellir la barre de défilement grâce à la technologie CSS. Dans la spécification CSS3, de nouveaux attributs de style de barre de défilement sont fournis pour obtenir des effets de barre de défilement plus riches.

1. Changer la couleur de la barre de défilement

/Changer la couleur de la barre de défilement/
::-webkit-scrollbar {

width: 10px;
height: 10px;
background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

dans Dans ce code CSS, en définissant l'attribut "webkit-scrollbar", nous pouvons définir la largeur, la hauteur et la couleur d'arrière-plan de la barre de défilement. En définissant la propriété "webkit-scrollbar-thumb", nous pouvons définir la couleur et le style de bordure de la zone de fonctionnement de la souris de la barre de défilement.

2. Changer la forme de la barre de défilement

/Changer la forme de la barre de défilement/
/Barre de défilement verticale/
::-webkit-scrollbar {

width: 10px;
background-color: #F5F5F5;

}

::-webkit -scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

/ horizontal scrollbar /
:: - webkit-scrollbar {

height: 10px;
background-color: #F5F5F5;

}

:: - webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

the ci-dessus deux pièces du code CSS sont respectivement destinés aux barres de défilement verticales et horizontales. En modifiant la valeur de l'attribut "width" ou "height", nous pouvons modifier la largeur et la hauteur de la barre de défilement. Dans le même temps, en définissant la valeur de l'attribut "border-radius", nous pouvons également modifier le style de bordure de la barre de défilement.

3. Exemple de démonstration

Grâce à la technologie CSS, nous pouvons atteindre l'objectif de masquer les barres de défilement et d'embellir l'effet de défilement. Ce qui suit est un exemple simple de démonstration qui montre comment utiliser le code CSS pour obtenir les effets « masquer la barre de défilement » et « modifier la forme de la barre de défilement ».

Code HTML :

<div class="content">
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
    <p>这是一段demo演示的文字</p>
</div>

Code CSS :

/Masquer la barre de défilement/
.content::-webkit-scrollbar {

display: none;

}

/Changer la forme de la barre de défilement/
.content::-webkit-scrollbar {

width: 10px;
background-color: #F5F5F5;

}

.content::-webkit-scrollbar-thumb {

border-radius: 5px;
background-color: #999999;

}

.container {

width: 400px;
height: 300px;
overflow: auto;

}

.content p {

font-size: 18px;
line-height: 30px;
text-indent: 2em;
color: #666666;

}

Dans cet exemple de démonstration, nous définissons l'attribut "overflow: auto" pour obtenir l'effet de défilement lorsque le contenu de la page Web dépasse la hauteur du conteneur. Dans le même temps, nous avons également obtenu l'effet de masquer la barre de défilement et de modifier la forme de la barre de défilement en définissant les valeurs de "::-webkit-scrollbar" et "::-webkit-scrollbar-thumb". propriétés.

Résumé :

La barre de défilement est l'un des éléments interactifs courants dans les pages Web. Elle peut aider les utilisateurs à mieux parcourir et afficher le contenu des pages Web. Grâce à la technologie CSS, nous pouvons personnaliser le style de la barre de défilement pour mieux améliorer l'expérience utilisateur. Dans le développement réel du projet, en plus des méthodes des exemples de démonstration ci-dessus, nous pouvons également obtenir des effets de barre de défilement plus colorés en ajoutant des images d'arrière-plan et en modifiant dynamiquement les styles de barre de défilement.

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!