Désactiver la barre de défilement dans CSS
-
Définissez
overflowsurhiddenpour les baliseshtmletbodypour désactiver la barre de défilement en CSS -
Définissez
overflow-xsurhiddenpour désactiver la barre de défilement horizontale dans CSS
Ce didacticiel présentera quelques méthodes pour désactiver la fonctionnalité de la barre de défilement sur une page Web.
Définissez overflow sur hidden pour les balises html et body pour désactiver la barre de défilement en CSS
On peut utiliser la propriété CSS overflow pour désactiver la barre de défilement en CSS. La propriété overflow définit le comportement de la barre de défilement dans une page Web. La barre de défilement peut être masquée ou rendue visible lorsque le contenu d’un élément est plus grand que la zone spécifiée. Lorsque nous utilisons la valeur hidden pour la propriété overflow, le contenu est découpé dans la zone de l’élément et le reste de l’élément deviendra invisible. Nous pouvons le définir sur scroll pour ajouter une barre de défilement pour afficher le reste du contenu non découpé. Nous utiliserons PHP pour générer un long texte sur notre page Web. Ensuite, nous désactiverons la barre de défilement.
Par exemple, créez une variable $text en PHP et donnez-lui la valeur Hello World. Utilisez la boucle for pour l’itérer 100 fois. N’oubliez pas d’ajouter la balise br lors de l’affichage de la variable. Cela crée 100 lignes du texte Hello World. Incluez le PHP dans le body du HTML. En CSS, sélectionnez les balises html et body. Réglez la marge sur 0 et donnez la hauteur de 100%. Ensuite, définissez la propriété overflow sur masqué.
Dans l’exemple ci-dessous, nous avons réglé la height du html et du body à 100%. Cela signifie que le body et la height auront 100% de la hauteur de leurs conteneurs parents. La hauteur de ces conteneurs sera égale à la hauteur du navigateur. Le texte sera coupé à la hauteur du navigateur, et le reste sera invisible. Nous pouvons même définir la propriété margin sur 0 si la marge a été remplacée par une autre valeur pour désactiver la barre de défilement. Nous pouvons même utiliser overflow-y au lieu de overflow et le définir sur hidden. Cela désactivera la barre de défilement verticalement.
Exemple de code :
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
html, body
{
height: 100%;
overflow: hidden
}
Définissez overflow-x sur hidden pour désactiver la barre de défilement horizontale dans CSS
Nous pouvons utiliser la propriété overflow-x et la définir sur hidden pour désactiver la barre de défilement horizontale dans CSS. On peut tester la désactivation de la barre de défilement horizontalement en limitant un texte à une seule ligne. Nous pouvons boucler un texte plusieurs fois en PHP et utiliser CSS pour le forcer à apparaître sur une seule ligne.
Par exemple, bouclez le texte Helloo World en utilisant PHP comme dans la méthode ci-dessus. N’utilisez pas la balise br pour que le texte n’apparaisse pas dans la ligne suivante. En CSS, définissez la propriété display sur inline-block pour la balise body. Définissez la propriété white-space sur nowrap dans la balise html. Ensuite, définissez overflow-x sur hidden en sélectionnant la balise body.
Lorsque nous définissons display sur inline-block, cela force le texte à être affiché sur une seule ligne. Pour obtenir le texte en une seule ligne, nous devons définir la propriété white-space du conteneur parent sur nowrap. Jusqu’à présent, la barre de défilement horizontale fonctionnait très bien. Définir le overflow-x sur hidden coupera le texte en fonction de la fenêtre d’affichage et la barre de défilement horizontale sera désactivée.
Exemple de code :
<body>
<?php
$text = "Helloo World";
for($i=0; $i<100; $i++){
echo $text;
}
?>
</body>
html{
white-space:nowrap;
}
body {
display:inline-block;
overflow-x: hidden
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn