Comment masquer la barre de défilement en CSS

Méthode : 1. Utilisez l'instruction "overflow-y:scroll" ; 2. Utilisez l'instruction "overflow-x:hidden;overflow-y:auto;" 15px; marge-bas:-15px;" déclaration.

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

Méthode 1

Le code est le suivant :

html { overflow-y: scroll; }

Principe : Forcer la barre de défilement verticale d'IE à être affiché, tout en ignorant le défilement horizontal Article

Avantages : Résout complètement ce problème, vous permettant de conserver le doctype XHTML complet.

Inconvénients : les barres de défilement verticales apparaissent même lorsque la page ne nécessite pas de barres de défilement verticales.

Méthode 2 : (recommandée)

Le code est le suivant :

html { overflow-x: hidden; overflow-y: auto; }

Principe : Masquer le défilement horizontal, vertical défilement selon le contenu adaptatif

Avantages : Résolvez ce problème visuellement. Les barres de défilement verticales ne sont pas forcées d'apparaître lorsqu'elles ne sont pas nécessaires.

Inconvénients : Masquez simplement la barre de défilement horizontale, si la page en a vraiment besoin. Quand en utilisant une barre de défilement horizontale,

le contenu en dehors de l'écran ne sera pas visible car l'utilisateur ne peut pas faire défiler horizontalement.

Méthode 3

Le code est le suivant :

body { margin-right: -15px; margin-bottom: -15px; }

Principe : Cela ajoutera une marge horizontale et verticale Négative valeur, une fois qu'IE aura ajouté cette valeur précise, cela supprimera l'illusion du besoin de barres de défilement

Avantages : Ce problème est résolu visuellement. Le défilement vertical est adaptatif en fonction du contenu

Inconvénients : En raison de la marge de 15px "créée artificiellement", la zone d'écran remplie ne peut pas être utilisée

------------------------------ - ---------------
Définir le style

Dans le html original, on peut définir la barre de défilement de toute la page comme ceci

Le code est le suivant :

body{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

Mais le même code ne fonctionnera pas lorsque nous l'appliquerons sous xhtml. Je crois que beaucoup de bons amis ont rencontré le même problème

Donc. Comment puis-je appliquer le style de barre de défilement sous xhtml ? Regardez le code suivant

Le code est le suivant :

html{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

La seule différence entre ce code et le paragraphe précédent est que dans les éléments définis par css, l'un est body et l'autre est html. Testons-le à nouveau et changeons le

"corps" de la page html en "html" pour tester et constater que l'effet peut toujours être obtenu. Alors pourquoi ?

Littéralement, xhtml a un x de plus que HTML, donc ce x est en fait du XML. Pourquoi devons-nous y ajouter du XML ? En fait, la raison la plus fondamentale est de rendre le HTML plus structuré et standardisé (car le HTML est vraiment mauvais).

Ce qu'on définit en html c'est body. Parce que le html n'est pas très standard, ça marche, mais ça ne marche pas en xhtml

Quand je regarde l'image, c'est évident que le. balise body Ce n'est pas l'élément racine lui-même, seul le HTML est l'élément racine, et la barre de défilement de la page appartient également à l'élément racine, c'est pourquoi notre définition du corps n'a aucun effet, car ce que nous définissons n'est qu'un sous-élément. ok, on connaît le principe, faisons une expérience Si la définition de "body" ou "xhtml" est remplacée par "*", le code

est le suivant :

*{ 
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

passe. à la fois html et xhtml, car * consiste à définir n'importe quelle balise sur la page, bien sûr, il inclut également la balise "html".

(ps : En fait, ce n'est pas tant la différence entre html et xhtml que la différence entre l'existence ou non d'un doctype de transition XHTML 1.0, mais si vous supprimez le doctype de transition XHTML 1.0 de la page, puis cette page Il n'y a pas de doctype. La méthode d'affichage par défaut est html4.01, mais vous devez changer le doctype de transition XHTML 1.0 en doctype HTML 4.01. Cela n'aura aucun effet si vous définissez le corps sur la même page. , bien que le standard de cette page soit html 4.01)

(Partage vidéo 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!