Comment changer les barres de défilement

Si vous souhaitez pimenter votre site Web ou faire fondre avec le reste de votre site, essayez de modifier vos barres de défilement. Les modifications apportées aux couleurs d'une barre de défilement sont affichées dans Internet Explorer, mais pas les autres navigateurs, comme Firefox ou Opera.


Sommaire

L'utilisation de CSS (Cascading Style Sheets) pour changer les barres de défilement

  1. Familiarisez-vous avec les parties d'une barre de défilement afin que vous sachiez comment accéder / modifier sur votre code CSS. Une barre de défilement comprend le curseur (utilisé pour défiler vers le haut / bas d'une page), piste de barre de défilement (où le curseur se déplace plus) et deux flèches de défilement (en haut et en bas de la piste).

  2. Examinez le code CSS pour une barre de défilement. Voici un exemple de code:
    scrollbar-face-color: Concerne la couleur du curseur de défilement
    scrollbar-track-color: applique à la couleur de la piste de barre de défilement
    scrollbar-arrow-color: applique à la couleur de la flèche de défilement
    scrollbar-shadow-color: applique à la couleur de l'ombre de la barre de défilement
    scrollbar-darkshadow-color: applique à la couleur de la barre de défilement ombre
    scrollbar-highlight-color: applique à la couleur de la surbrillance de la barre de défilement
    scrollbar-3dlight-color: applique à la couleur de la barre de défilement 3D de lumière

  3. Pour changer la couleur de votre barre de défilement curseur rouge, votre code lirait comme suit:

    scrollbar-face-color: # FF0000-
    Soyez sûr d'inclure un point-virgule après chaque ligne de code.

Ajout de la barre de défilement CSS comme un lien externe

  1. Ouvrez votre éditeur de texte favori et créer un fichier CSS.

  2. Ajoutez le code suivant à votre fichier CSS pour changer la barre de défilement par défaut:
    body {scrollbar-base-color: # FF0000-}
    La barre de défilement par défaut vous permet de changer toutes les couleurs de votre barre de défilement à la fois.

  3. Remplacer la couleur avec le vôtre.

  4. Apporter des modifications détaillées aux différentes parties de votre barre de défilement en ajoutant le code suivant à la place:
    body {
    scrollbar-face-color: # 0000FF
    GO
    scrollbar-track-color: # 000000
    GO
    scrollbar-arrow-color: # 000000
    GO
    scrollbar-shadow-color: # 999999
    GO
    scrollbar-darkshadow-color: # 999999
    GO
    scrollbar-highlight-color: # 0000FF
    GO
    scrollbar-3dlight-color: # 0000FF
    GO
    }
    Rappelez-vous de remplacer les couleurs avec ceux que vous souhaitez utiliser.

  5. Sauvegardez votre fichier CSS et ouvrez votre fichier HTML.

  6. Placez le code suivant entre la balise HEAD:

    Remplacer "scrollbar.css" pour votre fichier CSS réelle et l'emplacement.

  7. Enregistrez votre fichier HTML et de le prévisualiser dans votre navigateur.

Ajout de la barre de défilement CSS comme un lien interne

  1. Ajoutez ce qui suit directement dans votre code HTML entre la balise HEAD, mais remplacer les couleurs avec ceux que vous souhaitez utiliser:

  2. Enregistrez votre fichier HTML et de le prévisualiser dans le navigateur.

  3. Jouez avec les couleurs jusqu'à ce que vous êtes satisfait de votre création.

  4. Changez chaque couleur à la couleur de votre page de cacher votre barre de défilement ou le rendre transparent fond.

Retrait de barres de défilement d'une fenêtre popup avec javascript

  1. Placez le code suivant entre la balise HEAD de votre document HTML:

  2. Remplacez le nom_window (nom de la fenêtre popup), largeur, hauteur, à gauche (distance de gauche de l'écran), top (distance de la gauche de l'écran), les barres de défilement (oui / non pour afficher les barres de défilement) et la barre de menu (oui / non pour afficher la barre de menu), redimensionnable (oui / non pour redimensionner la fenêtre), l'emplacement et la barre d'outils avec votre information.

  3. Ajoutez le code suivant à la tag pour remplacer le lien de votre page de pop-up.
    votre texte pour le lien

  4. Remplacer "page_name.html" avec votre page HTML réelle.

  5. Enregistrez votre fichier HTML et de le prévisualiser dans un navigateur. Vous êtes tous fait.




Conseils & Avertissements








  • Création d'un fichier CSS séparé pour vos barres de défilement rend plus facile à changer à l'avenir. Vous aurez seulement à changer une fois dans votre fichier CSS par rapport à plusieurs reprises pour chaque fichier HTML.
  • javascript doit être activé pour que l'option javascript pour fonctionner.
» » » » Comment changer les barres de défilement