À propos des barres de défilement en HTML/suppression des barres de défilement

1. Le problème de couleur de la barre de défilement en xhtml

Dans le html original, on peut définir la barre de défilement de la page entière comme ceci :

corps{

scrollbar -3dlight-color:#D4D0C8; /*- Extérieur gauche-*/

scrollbar-highlight-color:#fff; -face-color:#E4E4E4; /*-face-*/

scrollbar-arrow-color:#666; /*-arrow-*/

scrollbar-shadow-color:# 808080; / *- Deuxième en partant de la droite-*/

scrollbar-darkshadow-color:#D7DCE0; /*- Premier en partant de la droite-*/

scrollbar-base-color:# D7DCE0; /*- Couleur de base- */

scrollbar-track-color:#;/*- Slider-*/

}

Mais le même code ne peut pas être utilisé sous xhtml Cela a fonctionné. Je crois que de nombreux bons amis ont rencontré le même problème.

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

html{

scrollbar-3dlight-color:#D4D0C8; /*- le plus à gauche-*/

scrollbar-highlight-color:# fff ; /*- Deuxième à partir de la gauche-*/

scrollbar-face-color:#E4E4E4; /*- Face-*/

scrollbar-arrow-color:#666; - Flèche -*/

scrollbar-shadow-color:#808080; /*- Deuxième en partant de la droite-*/

scrollbar-darkshadow-color:#D7DCE0; la droite-*/

scrollbar-base-color:#D7DCE0; /*- base color-*/

scrollbar-track-color:#;/*- slide-*/

}

La seule différence entre ce code et le paragraphe précédent est que parmi 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 le tester et constater que l'effet peut toujours être obtenu. Alors pourquoi ?

Jetons un coup d'œil à l'image ci-dessous :



Il s'agit de la structure arborescente dom la plus basique du HTML.

Regardons les définitions de html et xhtml :



HTML (Hyper Text Markup Language, HyperText Markup Language), le langage de balisage hypertexte est largement utilisé sur Internet. Ci-dessus . HTML décrit comment la base de texte est rendue et comment les hyperliens se connectent à d'autres pages.

XHTML (Extensible Hypertext Markup Language, Extensible Hypertext Markup Language) est un langage de balisage dont l'expression est similaire au HTML, mais la syntaxe est plus stricte. En termes de relation d'héritage, HTML est une application basée sur SGML et est très flexible, tandis que XHTML est basé sur XML, qui est un sous-ensemble de SGML. XHTML 1.0 est devenu une recommandation du W3C le 26 janvier 2000.

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).

OK, revenons en arrière et regardons l'arborescence ci-dessus. Ce que nous définissons en HTML est le corps. Parce que le HTML n'est pas très standard, cela peut prendre effet, mais en HTML, cela ne fonctionnera pas. cette image. Évidemment, la balise body elle-même n'est pas l'élément racine, 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 quoi que nous définissons n'est qu'un sous-élément. OK, on ​​connaît le principe, faisons une expérience Si on change la définition de "body" ou "xhtml" en "*" :

*{

scrollbar-3dlight-color : #D4D0C8; /*- Extérieur gauche-*/

scrollbar-highlight-color:#fff; /*- Deuxième à partir de la gauche-*/

scrollbar-face-color:#E4E4E4; /*- Visage-*/

scrollbar-arrow-color:#666; /*- Arrow-*/

scrollbar-shadow-color:#808080; -*/

scrollbar-darkshadow-color:#D7DCE0; /*- celui de droite-*/

scrollbar-base-color:#D7DCE0; 🎜>
scrollbar-track-color:#;/*- Slider-*/

}

est transmis à la fois en html et en xhtml, car * consiste à définir n'importe quelle balise sur le page, bien sûr, elle 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, alors cette page n'aura pas de doctype, le mode d'affichage par défaut est html4.01, mais vous devez changer le doctype de transition XHTML 1.0 en HTML 4.01. Définir le corps sur la même page n'aura aucun effet, bien que le standard de. cette page est html 4.01)

2 , le problème des barres de défilement horizontales sur les pages frame sous xhtml

Lorsque vous utilisez IE6 pour parcourir des pages xhtml avec des frames, les barres de défilement horizontales et verticales apparaîtront ensemble par défaut. Il s'agit d'un bug dans IE6, et c'est dans Firefox Normalement, la raison est due à un défaut dans son interprétation du doctype transitionnel XHTML 1.0.

Il existe généralement 3 solutions à ce bug,

Méthode 1 :

Code :

html { overflow-y: scroll }
Principe : Forcer l'affichage de la barre de défilement verticale d'IE et ignorer 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 :

Code :

html { overflow-x: Hidden; overflow-y: auto; >

Principe : masquer le défilement horizontal et le défilement vertical est adaptatif en fonction du contenu.

Avantages : Résolvez ce problème visuellement. La barre de défilement verticale n’est pas forcée d’apparaître lorsque cela n’est pas nécessaire.

Inconvénients : Il masque uniquement la barre de défilement horizontale. Si la page a vraiment besoin de la 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 :

Code :

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

Principe : Cela Ajoutez une valeur négative à la marge horizontalement et verticalement. Une fois que IE aura ajouté cette valeur exacte, cela supprimera l'illusion du besoin de barres de défilement.

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

Inconvénient : La marge de 15px étant "créée artificiellement", la zone d'écran remplie ne peut pas être utilisée.



Supprimez la barre de défilement horizontale :



Supprimez la barre de défilement verticale :



Masquer la barre de défilement horizontale et afficher la barre de défilement verticale :



Tout masquer



Ou



Voici le code d'attribut de la barre de défilement :

overflow-y : visible auto | caché | défilement

visible : ne coupe pas le contenu et n'ajoute pas de barres de défilement.

auto : coupez le contenu et ajoutez des barres de défilement si nécessaire

masqué : ne pas afficher le contenu qui dépasse la hauteur de l'objet. Cet attribut ne sera pas introduit ici. Si vous le souhaitez, vous pouvez. essayez-le vous-même

défilement : affichez toujours la barre de défilement verticale

Tout d'abord, laissez-moi vous expliquer comment supprimer la barre de défilement :

Si vous utilisez le style Baidu modèle, il ne peut y avoir qu'une seule barre de défilement, c'est-à-dire La plus grande barre de défilement de la fenêtre du navigateur sur le côté droit de tout l'espace est la barre de défilement que j'ai embellie. Maintenant, laissez-moi vous dire que nous pouvons supprimer cette barre de défilement, mais elle. n'affectera pas la méthode de navigation :

Dans le corps
{} :

visible, afin que la barre de défilement ne soit pas affichée. Vous vous demandez peut-être comment le retirer comme ça ? Haha, puisque j'ai dit que cela n'affecterait pas la navigation, il existe bien sûr un moyen de naviguer en utilisant la molette de la souris

. Bien que la barre de défilement ait disparu, la molette de la souris peut toujours faire défiler le Web. page de haut en bas. Je crois que lorsque vous naviguez généralement sur le Web, vous utilisez la molette de défilement pour faire défiler la page Web plus de fois que vous ne faites glisser directement la barre de défilement avec la souris

, n'est-ce pas ? Pour rappel, si vous rencontrez un ami qui n'a ni barre de défilement ni molette de défilement sur sa souris, comment doit-il naviguer sur le web ? Haha, vous pouvez utiliser PageUp et PageDown

au-dessus des touches fléchées du clavier pour monter et descendre les pages. Vous pouvez également utiliser Espace pour dérouler des pages Web et Shift+Espace pour afficher des pages Web. consiste à utiliser les touches fléchées haut et bas. Pour tirer, vous pouvez également appuyer sur la touche Accueil pour revenir en haut de la page Web, et sur la touche Fin pour

pour atteindre le bas de la page Web. Haha, y a-t-il plusieurs façons ? Cependant, cela entraînera toujours quelques désagréments, vous pouvez donc envisager d'annuler cette barre de défilement en fonction de votre propre espace et de vos préférences.

Haha, je ne m'attendais pas à en dire autant d'un coup

Parlons de la façon d'ajouter une barre de défilement :

overflow-y : auto;height: How many px

auto

consiste à déterminer automatiquement s'il faut ajouter une barre de défilement. Lorsque le contenu de l'objet défini dépasse la hauteur définie par hauteur, la barre de défilement sera automatiquement ajoutée. ne pas être affiché. La valeur par défaut dans body{} est

overflow-y: auto;height : hauteur du navigateur, donc lorsque le contenu de la page Web dépasse la hauteur du navigateur, une barre de défilement apparaîtra automatiquement sur le côté droit. du navigateur

Si vous

devez définir cela, je vous suggère de le définir dans des modèles avec un contenu et une hauteur variables tels que les derniers commentaires #m_comment{}, la liste d'articles #m_blog{}, etc. . Quelques amis trouvés Si vous n'avez pas l'identifiant de ces versions de modèle

, vous ne pouvez avoir que des identifiants tels que #m_comment p.item{} ou #m_pro a{}, etc. Vous pouvez ensuite ajouter l'ID que vous n'avez pas et vous pouvez le définir

Voici une autre façon d'ajouter une barre de défilement :

overflow-y :scroll

La fonction de ce paramètre a été expliqué ci-dessus, mais si vous ajoutez seulement ce paramètre, bien que la barre de défilement soit affichée, mais la barre de défilement ne sera pas affichée, donc une

hauteur : combien de px

hauteur L'attribut doit être ajouté, ce qui est similaire à la méthode ci-dessus, mais il existe des différences fondamentales. Peu importe si la hauteur du contenu de l'objet dépasse la hauteur définie par la hauteur, la barre de défilement sera toujours affichée sur le côté

Parlons de l'embellissement de la barre de défilement. Mon ami m'a montré cela en ligne. Une note, je pense que l'image ci-dessus est très bonne, mais elle est très petite, j'ai donc doublé la taille et elle a l'air beaucoup plus claire. Parlons d'abord. les différents attributs d'embellissement :

SCROLLBAR-FACE-COLOR : Code couleur

SCROLLBAR-HIGHLIGHT-COLOR : Code couleur ;SCROLLBAR-SHADOW-COLOR : code couleur ;

SCROLLBAR-3DLIGHT-COLOR : code couleur

SCROLLBAR-ARROW-COLOR : code couleur

SCROLLBAR-TRACK-COLOR ; : Code couleur ;

SCROLLBAR-DARKSHADOW-COLOR : Code couleur ;

Hochez-vous la tête quand vous voyez autant d'attributs ? Haha, ne vous inquiétez pas, vous vous sentirez beaucoup mieux si vous jetez un œil à l'illustration agrandie deux fois que je viens de mentionner :

L'image dans ce

a également une base de barre de défilement- L'attribut de couleur, en fait, cet attribut est la somme des 7 attributs ci-dessus. Comment le dites-vous ? Autrement dit, après avoir défini la couleur de cet attribut,

vous n'avez pas besoin de définir les 7 attributs précédents. La barre de défilement le définira automatiquement pour vous, mais ce paramètre sera basé sur la barre de défilement que vous avez sélectionnée. set. -La couleur de -base-color est automatiquement définie sur

L'avantage de cet attribut est qu'il n'oblige pas tout le monde à étudier les couleurs de différents endroits, mais l'inconvénient est qu'il ne peut pas tout mélanger. les couleurs en une seule. .

Remarque : si scrollbar-base-color est défini, ne définissez pas les sept autres attributs. Si les sept autres attributs sont définis, ne définissez pas scrollbar-base-color, sinon il pourrait y avoir des conflits. il y aura des effets qui ne fonctionneront pas

Enfin, étant donné que vous aimerez peut-être mon code d'embellissement [c'est tellement puant~], j'ai posté mon code d'embellissement :

SCROLLBAR -FACE-COLOR : #CCFFFF ;

SCROLLBAR-HIGHLIGHT-COLOR : blanc

SCROLLBAR-SHADOW-COLOR :

SCROLLBAR-3DLIGHT-COLOR : #813533 ;
SCROLLBAR-FLÈCHE-COULEUR : #813533 ;

SCROLLBAR-TRACK-COULEUR : blanc ;
-->

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!