Comment masquer les barres de défilement avec CSS

Cet article utilise principalement trois méthodes pour partager avec vous comment masquer les barres de défilement en CSS. Ici, je recommande la deuxième méthode, bien sûr, en fonction de la situation réelle. Les amis intéressés par cet article devraient apprendre ensemble

Masquer les barres de défilement dans xhtml
Lors de la navigation sur une page xhtml encadrée avec ie6, les barres de défilement horizontale et verticale apparaîtront ensemble par défaut. Il s'agit d'un bug d'ie6. , ce qui est normal sur Firefox, se produit en raison d'une faille dans son interprétation du doctype de transition XHTML 1.0. Il existe généralement trois solutions à ce bug,
Méthode 1 :
Code :Code du programme

html { overflow-y: scroll; }

Principe : Forcer l'affichage de la barre de défilement verticale d'IE, tout en ignorant la barre de défilement horizontale

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)Code :
Code du programme

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

Principe : Masquer le défilement horizontal, le défilement vertical est adaptatif en fonction du contenu

Avantages : Ce problème est résolu visuellement. La barre de défilement verticale n'est pas forcée d'apparaître lorsqu'elle n'est pas nécessaire.
Inconvénients : La barre de défilement horizontale n'est masquée que si la page a vraiment besoin de la barre de défilement horizontale. il sera en dehors de l'écran. Le contenu ne sera pas visible car l'utilisateur ne peut pas faire défiler horizontalement.

Méthode 3 :
Code :
Code du programme

Principe : Cela ajoutera une valeur négative dans les directions horizontale et verticale de la marge, ajoute IE Une fois la valeur précise déterminée, l'illusion du besoin de barres de défilement sera supprimée.

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

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

Inconvénients : En raison du "créé artificiellement". Marge de bord extérieur de 15 px, la zone d'écran remplie ne peut donc 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 ça
Code du programme

Mais le même code, on l'applique dans Cela ne fonctionne pas sous xhtml. Je pense que de nombreux bons amis ont rencontré le même problème

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:#;/*- 滑道 -*/
}

Alors, comment puis-je appliquer le style de barre de défilement sous xhtml ? Regardez le code suivant

Code du programme

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

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:#;/*- 滑道 -*/
}

"corps" de la page HTML en "html" pour le 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 que nous définissons en html est body. Cela fonctionne car le html n'est pas très standard, mais cela ne fonctionne pas en xhtml
Je regarde l'image et il est évident que la balise body elle-même n'est pas l'élément racine. , seul 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 élément enfant. ok, on connaît le principe, faisons une expérience Si la définition "body" ou "xhtml" est remplacée par "*", le
code du programme

passera. à la fois html et xhtml , car * consiste à définir n'importe quelle balise sur la page, y compris bien sûr la balise "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:#;/*- 滑道 -*/
}

(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 ne sera pas efficace si vous définissez le corps sur la même page, bien que la norme de cette page soit HTML 4.01)

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au PHP. Site chinois !

Recommandations associées :

css+html pour implémenter un calendrier simple

CSS3 pour créer des images arrondies et des images ovales

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!