Retirez la barre de défilement horizontale CSS
Pourquoi retirer la barre de défilement?
Bien qu'il ne soit pas recommandé dans la conception Web de modifier le comportement du navigateur par défaut, il y a des moments où il est nécessaire. Par exemple, une barre de défilement qui émerge une fois que le contenu d'un élément déborde peut être difficile à percevoir s'il occupe une petite partie d'une page Web. De plus, la suppression de la barre de défilement a complètement du sens car, en tant que concepteur Web, vous pourriez ne pas penser à faire défiler sur une page Web. Quelle que soit la justification de la cachette de la barre de défilement CSS, la compatibilité entre les navigateurs doit être envisagée. De plus, après avoir caché la barre de défilement, prévisualisez le site Web pour vous assurer qu'il fonctionne comme prévu sur les appareils de bureau et mobiles.
Suppression de la barre de défilement dans CSS:
Le contenu qui dépasse les limites de son conteneur peut être géré en utilisant l'attribut Overflow dans CSS. Si le contenu d'un élément est plus grand que l'espace disponible, vous pouvez utiliser cette propriété pour couper, cacher ou faire défiler le contenu. Les fonctionnalités de manipulation de débrollable dans les supports visuels sont incluses dans ce module CSS. Dans CSS, le débordement se produit lorsque le contenu d'un conteneur dépasse un ou plusieurs bords du conteneur. Essentiellement, il spécifie ce qui se produit lorsque le contenu d'un élément est trop important pour s'adapter dans son contexte de bloc.
La propriété excessive de CSS prend en charge les valeurs suivantes:
auto: Pour ajouter une barre de défilement, mais il ne le fera que si le contenu dépasse la zone de défilement.
visible: Pour permettre au contenu de s'afficher même lorsqu'il déborde.
faire défiler: Pour couper le contenu et voir le contenu restant, il ajoutera une barre de défilement.
caché: Il affichera le contenu visible et le contenu restant sera caché.
agrafe: Il éprouve le contenu d'un élément à sa boîte.
Nous pouvons définir les valeurs de barre de défilement avec Overflow-X pour contrôler la barre de défilement horizontale, le débordement pour la barre de défilement verticale et le débordement prendra en charge les deux.
Exemple 01: Cacher la barre de défilement horizontale dans CSS
Commençons par l'exemple de base de la suppression de la barre de défilement de la page Web à l'aide de CSS. Malheureusement, il n'y a pas de règle CSS spécifique qui peut être utilisée pour faire disparaître la barre de défilement et pourtant permettre aux utilisateurs de faire défiler une page ou un élément. Avec l'utilisation de quelques règles de CSS spécifiques au navigateur, c'est toujours faisable. Appliquez le CSS suivant au corps de la page Web (pour la page pleine) ou un seul élément pour masquer ou supprimer la barre de défilement et maintenir la fonctionnalité de défilement.
Comme vu ci-dessus, nous pouvons utiliser différentes façons pour faire disparaître les barres de défilement dans différents navigateurs. Dans l'exemple ci-dessus, l'élément est un domaine ou un sélecteur spécifique à partir de laquelle vous souhaitez retirer les barres de défilement. Dans cet exemple, nous créerons un exemple de page simple pour vous montrer comment vous pouvez masquer la barre de défilement horizontale, mais sa fonctionnalité de défilement fonctionnera. Nous allons créer une page de page Web en utilisant> Tags. À l'intérieur de ces étiquettes, nous créerons des éléments de la tête et du corps pour définir la racine et le corps de l'élément.
L'attribut «Affichage: aucun» fera disparaître la barre sans affecter sa fonctionnalité de défilement.
Pour masquer la barre de défilement horizontale, nous permettrons à notre contenu de dépasser la limite horizontale de la page. Pour cela, nous utiliserons «White Space: Nowrap»; Cela permettra au texte de rester sur la même ligne jusqu'à ce que nous utilisions la balise de ligne de pause. Dans des navigateurs plus anciens comme «Internet Explorer», nous définirons l'attribut -m-overflow-style: aucun ». Pendant que dans les navigateurs modernes, comme dans Firefox, nous pouvons utiliser `` Scrollbar-Width: Aucun 'et pour Chrome et d'autres navigateurs modernes,' Affichage: aucun 'ne peut être utilisé. Lorsque le contenu s'étend au-delà des limites horizontales de l'élément au niveau du bloc, la propriété CSS Overflow-X détermine ce qui affiche.
Nous pouvons faire de même pour les éléments div en utilisant des sélecteurs Div dans CSS.
En utilisant le code ci-dessus, nous obtiendrons une page Web comme suit:
Comme vous pouvez le voir, c'est la même chose que la précédente, mais cette fois, nous avons utilisé les sélecteurs Div pour masquer les barres de défilement des conteneurs. Nous avons stylisé le div en spécifiant que sa frontière est en noir solide 5px, Border-Radius 5px, hauteur de 150px et largeur du conteneur div est de 300px.
Exemple 02: Supprimer la barre de défilement et désactiver sa fonctionnalité dans CSS
Grâce à sa fonction de débordement CSS, CSS permet à la fois de disparaître la barre de défilement et de désactiver le défilement. La gestion du contenu qui dépasse les limites de son conteneur est gérée par ces propriétés. Cacher la barre de défilement horizontale peut être utile car le défilement horizontal est souvent un choix terrible. En utilisant «Overflow-X: Hidden», nous pouvons faire disparaître la barre de défilement horizontale et arrêter le défilement horizontal. Nous avons simplement ajouté la règle `` débordement: cachée '' au corps d'un élément de conteneur pour arrêter de faire défiler tout en utilisant cet attribut. Cela cachera tout le matériel qui s'étend au-delà de la limite de l'élément.
En utilisant ce code, notre barre de défilement horizontale disparaîtra et nous ne pourrons pas faire défiler à gauche ou à droite.
Comme vous pouvez le voir, l'utilisation de 'Overflow-X: Hidden' a supprimé la barre de défilement horizontale ainsi que la fonctionnalité pour faire défiler à gauche ou à droite.
Cependant, pour afficher des matériaux qui étendent les limites du conteneur, utilisez le débordement: visible comme alternative.
Comme vous pouvez le voir, l'image dépasse les limites du conteneur.
Exemple 03: Suppression de la barre de défilement horizontale jusqu'à ce que nous en ayons besoin
Dans certaines situations, la cachette de la barre de défilement pourrait améliorer votre conception. Dans d'autres cas, la suppression de cette partie de la page peut aggraver l'expérience utilisateur. La majorité des visiteurs relient une barre de défilement à l'action de faire défiler. Par conséquent, cela pourrait sembler inhabituel pour les autres si vous utilisez cette technique sur tout le site Web. De plus, les barres de défilement indiquent la quantité de page encore visible. L'absence d'une barre de défilement peut être rebutante sauf si vous avez un autre signal visuel qu'il y a encore plus de contenu à voir. Les tests des utilisateurs peuvent révéler comment l'absence de barre de défilement affecte l'expérience utilisateur de votre site, bien que dans de nombreuses situations, cacher la barre de défilement jusqu'à ce que l'utilisateur commence à faire défiler est un compromis intelligent.
Comme le débordement est défini sur Auto, les barres n'apparaîtront pas si le contenu n'est pas plus grand que les limites de la fenêtre du navigateur.
Comme vous pouvez le voir, il n'y a pas de barre de défilement horizontale car la limite n'a pas été dépassée. Lorsque la limite est dépassée, la barre de défilement apparaît à l'écran pour faire défiler.
Comme vous pouvez le voir dans le code HTML, le contenu en
est plus grand que l'exemple précédent, donc la barre de défilement horizontale apparaîtra en bas.
La barre de défilement est ajoutée par le paramètre AUTO, mais il n'apparaît pas à moins qu'il n'y ait un débordement de contenu. En conséquence, la barre de défilement dissimulée n'apparaît que si nécessaire.
Conclusion
Puisqu'il facilite la navigation, la barre de défilement est un indicateur visuel utile pour la majorité des visiteurs. Cependant, dans certaines circonstances, vous pouvez le cacher délibérément pour améliorer ou changer votre conception. Avec seulement quelques principes de notre article, vous pouvez utiliser CSS pour masquer la barre de défilement sur une page ou un élément HTML. Dans ce tutoriel, nous avons appris à masquer la barre de défilement et comment cette fonctionnalité fonctionne dans différents navigateurs. Maintenant, après avoir terminé ce tutoriel, vous devriez être en mesure de supprimer ou de masquer facilement les barres de défilement par vous-même.