Comment supprimer la barre de défilement en CSS

Supprimer la barre de défilement avec CSS : 1. Calculez la largeur de la barre de défilement, définissez la position de la barre de défilement via le positionnement et masquez la barre de défilement. 2. Utilisez le sélecteur "::-webkit-scrollbar" ou l'attribut "overflow" pour supprimer la barre de défilement.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Méthode CSS pour supprimer les barres de défilement 1 : Calculer la largeur de la barre de défilement et la masquer

Dans la barre latérale de ce site, vous pouvez voir que le contenu du rapport quotidien front-end n'a pas de barres de défilement , mais déplacer la souris vers le haut peut faire défiler le contenu. De quelle technologie s’agit-il ? En fait, je cache simplement la barre de défilement via le positionnement. Démo : Voici une version simplifiée du code

<div class="outer-container">
    <div class="inner-container">
    ......
    </div>
</div>

.outer-container{
width: 360px;
height: 200px;
position: relative;
overflow: hidden;
}
.inner-container{
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}

Adresse de la démo : http://caibaojian.com/demo/2018/3/scroll2.html

Ce code déplace intelligemment 17 pixels vers la droite, ce qui est exactement égal au défilement La largeur de la barre. Cette valeur a été obtenue par débogage manuel. Aucun problème trouvé dans Chrome et IE.

Méthode CSS pour supprimer les barres de défilement 2 : utilisez le sélecteur ::-webkit-scrollbar ou l'attribut overflows

Dans le même temps, l'article partageait également une méthode pour masquer la barre de défilement via CSS, mais cette méthode est non compatible avec IE Il peut être utilisé par les utilisateurs mobiles. Il s'agit du sélecteur de pseudo-objet de la barre de défilement personnalisée ::-webkit-scrollbar. Pour plus de détails, veuillez consulter l'article précédent : Style de barre de défilement du kit Web personnalisé CSS3 pour Chrome et Safari

.element::-webkit-scrollbar { width: 0 !important }

IE 10+

.element { -ms-overflow-style: none; }

Firefox

.element { overflow: -moz-scrollbars-none; }

.

Adresse de démonstration : http://caibaojian.com/demo/2018/3/scroll4.html

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

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!