barre de défilement cachée CSS

Dans le processus de création de pages Web, les barres de défilement sont un élément de conception inévitable. Cependant, il arrive parfois que l’apparition de barres de défilement brise la conception de la page entière. Dans ce cas, nous devons utiliser quelques astuces pour masquer les barres de défilement.

CSS propose une variété de méthodes pour masquer les barres de défilement, nous les présenterons une par une ci-dessous.

1. Utilisez l'attribut overflow

En CSS, nous pouvons utiliser l'attribut overflow pour contrôler si le contenu d'un élément doit déborder de son conteneur. Lorsque l'attribut de débordement est défini sur masqué, le contenu de l'élément sera tronqué, ce qui peut avoir pour effet de masquer la barre de défilement. Voici l'exemple de code :

body{
  overflow: hidden;
}

Le code ci-dessus masquera la barre de défilement de toute la page. Si vous souhaitez uniquement masquer la barre de défilement d'un certain élément, vous pouvez trouver le sélecteur CSS de l'élément et définir le débordement. attribuez-le à caché.

#container{
  overflow: hidden;
}

2. Utilisez les styles Webkit

Webkit est un moteur CSS qui prend en charge la plupart des navigateurs modernes, notamment Chrome et Safari. Voici quelques façons de masquer la barre de défilement à l'aide des styles Webkit :

1. Masquer la barre de défilement verticale :

::-webkit-scrollbar{
  width: 0px;
}

Le code ci-dessus masquera la barre de défilement verticale car la largeur de la barre de défilement verticale est de 17 px par défaut.

2. Masquer la barre de défilement horizontale :

::-webkit-scrollbar{
  height: 0px;
}

De même, le code ci-dessus masquera la barre de défilement horizontale car la hauteur de la barre de défilement horizontale est également de 17 px par défaut.

3. Masquer toutes les barres de défilement :

::-webkit-scrollbar{
  display: none;
}

Le code ci-dessus masquera complètement toutes les barres de défilement.

3. Utilisez jQuery

Si vous utilisez jQuery, vous pouvez également l'utiliser pour masquer la barre de défilement. Voici quelques façons de masquer les barres de défilement à l'aide de jQuery :

1. Masquer la barre de défilement verticale :

$(document).ready(function(){
  $('body').css('overflow-y', 'hidden');
});

Après avoir utilisé le code ci-dessus, la barre de défilement verticale de la page sera masquée.

2. Masquer la barre de défilement horizontale :

$(document).ready(function(){
  $('body').css('overflow-x', 'hidden');
});

Le code ci-dessus masquera la barre de défilement horizontale.

4. Utilisez JavaScript

Si vous souhaitez utiliser du JavaScript natif pour masquer la barre de défilement, voici quelques méthodes que vous pouvez utiliser :

1. Masquer la barre de défilement verticale :

document.getElementsByTagName("body")[0].style.overflowY = "hidden";

Le code ci-dessus masquera la barre de défilement verticale.

2. Masquer la barre de défilement horizontale :

document.getElementsByTagName("body")[0].style.overflowX = "hidden";

Le code ci-dessus masquera la barre de défilement horizontale.

Pour résumer, voici quelques méthodes courantes pour masquer les barres de défilement. En fonction de vos besoins, vous pouvez choisir une ou plusieurs de ces méthodes. Cependant, il convient de noter que le masquage de la barre de défilement affectera l'expérience utilisateur, des compromis et des tests de simulation sont donc nécessaires en utilisation réelle.

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!