Maison > Article > interface Web > Comment désactiver les barres de défilement gauche et droite de la page en CSS

Comment désactiver les barres de défilement gauche et droite de la page en CSS

WBOYoriginal: 2021-12-02 16:37:526384parcourir

En CSS, vous pouvez utiliser l'attribut "overflow-x" pour désactiver les barres de défilement gauche et droite de la page. Lorsque la valeur de cet attribut est "masquée", vous pouvez masquer le contenu de l'élément au-delà des bords gauche et droit. , désactivant ainsi les barres de défilement gauche et droite de la page Display; la syntaxe est "body{overflow-x:hidden;}".

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

Comment désactiver les barres de défilement gauche et droite de la page en CSS

Nous pouvons utiliser l'attribut overflow-x pour définir le contenu qui dépasse la largeur gauche et droite de la page à masquer, afin que les barres de défilement gauche et droite n'apparaîtront pas sur la page.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body{
        overflow-x:hidden;
    }
    </style>
</head>
<body>
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</body>
</html>

Si le style overflow-x:hidden; n'est pas ajouté à l'élément body, le résultat de sortie est le suivant :

Comment désactiver les barres de défilement gauche et droite de la page en CSS

Le résultat de sortie de l'exemple ci-dessus est le suivant :

Comment désactiver les barres de défilement gauche et droite de la page en CSS

(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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment afficher complètement l'image d'arrière-plan en CSSArticle suivant：Comment afficher complètement l'image d'arrière-plan en CSS

Articles Liés

Voir plus