À propos du problème des barres de défilement/suppression des barres de défilement dans la production de pages HTML_HTML/Xhtml_Web

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

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

Copiez le code

Le code est le suivant :

body{
scrollbar-3dlight-color:#D4D0C8 /*- le plus à gauche- */
scrollbar -highlight-color:#fff; /*- Deuxième en partant de la gauche-*/
scrollbar-face-color:#E4E4E4; :#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-*/
}

Mais le même code, notre application ne fonctionnera pas sous xhtml. Je crois que beaucoup de 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 :

Copiez le code Le code est le suivant :

html{
scrollbar-3dlight-color:#D4D0C8; /*- Extérieur gauche-*/
scrollbar-highlight-color:#fff; -color:#E4E4E4; /*- face-*/
scrollbar-arrow-color:#666; /*- arrow-*/
scrollbar-shadow-color:#808080; -*/
scrollbar -darkshadow-color:#D7DCE0; /*- celui de droite-*/
scrollbar-base-color:#D7DCE0; color:#;/*- slide Dao-*/
}


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 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), HyperText Markup Language est largement utilisé sur Internet. HTML décrit le texte comme le benchmark. est rendu 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 "*" :

Copier le code

Le code est le suivant :

*{

scrollbar-3dlight-color:#D4D0C8; couleur de surbrillance : #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; >scrollbar-base-color:#D7DCE0 ; /*- Couleur de base-*/
scrollbar-track-color:#;/*- Slider-*/
}


Passe à la fois en html et en xhtml, car * consiste à définir n'importe quelle balise sur la page, qui inclut bien sûr é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, 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 est html 4.01)

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

Lors de l'utilisation d'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 à une faille dans son interprétation du doctype de transition 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, Le défilement vertical s'adapte au 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énient : 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, le défilement vertical est adaptatif en fonction du contenu.
Inconvénient : La marge de 15 px étant "créée artificiellement", la zone d'écran remplie ne peut pas être utilisée.



Supprimez la barre de défilement horizontale :
:


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


Tout cacher


ou


Voici le code d'attribut de la barre de défilement :
overflow-y : visible | scroll automatique
visible : Ne coupe pas le contenu et n'ajoute pas de barre 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 l'essayer vous-même
. scroll : toujours afficher la barre de défilement verticale

Tout d'abord, permettez-moi de vous expliquer comment supprimer la barre de défilement :
Si vous utilisez le modèle de style Baidu, il ne peut y avoir qu'une seule barre de défilement, qui est la la plus grande barre de défilement de la fenêtre du navigateur sur le côté droit de tout l'espace, c'est-à-dire que c'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 cela n'affectera pas la méthode de navigation : Ajouter un débordement-y au corps
{} :
visible sera C'est tout, donc la barre de défilement ne sera 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 la page Web vers le haut et. vers le 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 faire défiler les pages de haut en bas. Vous pouvez également utiliser Space pour dérouler des pages Web et Shift Space pour afficher des pages Web. touches fléchées haut et bas pour tirer. De plus, vous pouvez appuyer sur la touche Accueil pour revenir en haut de la page Web, et appuyer sur la touche Fin pour
pour atteindre le bas de la page Web. Haha, y en a-t-il beaucoup. 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 espace et de vos préférences.

Haha, je ne m'attendais pas à dire autant de mots à la fois

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, sinon elle ne sera pas affichée. le corps{} 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 recommande it Définissez dans les derniers commentaires #m_comment{}, la liste d'articles #m_blog{} et d'autres modèles dont le contenu et la hauteur ne sont pas fixés. Certains amis ne trouvent pas les identifiants de ces modèles
. m_comment div.item{ } ou #m_pro a{}, etc., vous pouvez alors ajouter l'identifiant que vous n'avez pas, afin de pouvoir 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ée ci-dessus, mais si vous ajoutez uniquement ce paramètre, bien que la barre de défilement soit affichée, la barre de défilement ne sera pas affichée, vous devez donc ajouter un
hauteur : combien de px
L'attribut hauteur est similaire à la méthode ci-dessus, mais il existe une différence fondamentale. Peu importe si la hauteur du contenu de l'objet dépasse la hauteur définie par hauteur, la barre de défilement sera toujours affichée. sur le côté

Parlons-en ci-dessous Concernant l'embellissement des barres de défilement, mon ami m'a montré une explication sur Internet. Je trouve que l'image ci-dessus est très bonne, mais elle est très petite, j'ai donc doublé la valeur. taille et cela semble beaucoup plus clair. Parlons d'abord de l'embellissement:

Copier le code

Le code est le suivant. :

SCROLLBAR-FACE-COLOR : code couleur ;
SCROLLBAR-HIGHLIGHT-COLOR : code couleur
SCROLLBAR-SHADOW-COLOR : code couleur
SCROLLBAR-3DLIGHT- ; COULEUR : code couleur ;
SCROLLBAR-ARROW-COLOR : code couleur ;
SCROLLBAR-TRACK-COLOR : code couleur
SCROLLBAR-DARKSHADOW-COLOR : code couleur ; Est-ce que vous hochez la tête quand vous voyez tant d’attributs ? Haha, ne vous inquiétez pas, vous vous sentirez beaucoup mieux si vous jetez un œil au diagramme agrandi deux fois que je viens de mentionner :

L'image ici a également un attribut scrollbar-base-color. attribut C'est la somme des sept 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 base de la barre de défilement. set. 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 mélanger toutes 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 :





Copiez le code

Le code est le suivant : SCROLLBAR-FACE-COLOR : #CCFFFF ; : blanc;

SCROLLBAR-SHADOW-COLOR: #813533;

SCROLLBAR-3DLIGHT-COLOR:

SCROLLBAR-ARROW-COLOR: #813533;
SCROLLBAR-DARKSHADOW-COLOR : #813533 ;


J'ai ajouté le code ci-dessus dans le corps{}