794 votes

Cacher la barre de défilement sur une page HTML

CSS permet de masquer la barre de défilement ? Comment feriez-vous cela ?

1055voto

Peter Points 2685

À des fins d'exhaustivité, cela fonctionne pour webkit:

#element::-webkit-scrollbar { 
    display: none; 
}

Si vous voulez que toutes les barres de défilement caché, l'utilisation

::-webkit-scrollbar { 
    display: none; 
}

Je ne suis pas sûr à propos de la restauration d' - ce n'travail, mais il pourrait être une bonne façon de le faire:

::-webkit-scrollbar { 
    display: block; 
}

Bien sûr, vous pouvez toujours utiliser width: 0, qui peut être facilement restauré avec width: auto, mais je ne suis pas un fan de l'abus width pour la visibilité de bricolage.

Pour voir si votre navigateur prend en charge, essayez de cet extrait:

.content {
  /* These rules create an artificially confined space, so we get 
     a scrollbar that we can hide. They are not part of the hiding itself. */

  border: 1px dashed gray;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content::-webkit-scrollbar { 
  /* This is the magic bit */
  display: none;
}
<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(Notez que ce n'est pas vraiment une réponse correcte à la question car il masque les barres horizontales ainsi, mais c'est ce que je cherchais lorsque Google a fait de moi ici, alors j'ai pensé à la poster quand même.)

545voto

dcc Points 1033

Internet Explorer 5.5+

*Ces propriétés n'ont jamais fait partie de la CSS, et ils n'étaient jamais approuvé ou fournisseur préfixé mais ils travaillent dans Internet Explorer et Konqueror.

body, html { /* these are the default values, you can use any hex color value */
    scrollbar-face-color: ThreeDFace;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

Certaines de ces propriétés ont été correctement préfixé fournisseur avec la sortie d'IE9 mais ils ne sont que des pseudonymes pour le pré-existante non-préfixés propriétés. Ce sont:

-ms-scrollbar-3dlight-color, -ms-scrollbar-darkshadow-color, -ms-scrollbar-shadow-color

Plus de détails à propos de Internet Explorer

IE a fait scroll disponibles qui définit si oui ou non pour activer ou désactiver les barres de défilement ou obtient la valeur de la position des barres de défilement.

Avec Microsoft Internet Explorer 6 et plus tard, lorsque vous utilisez le !Déclaration DOCTYPE pour spécifier des normes conformes à la mode, cet attribut s'applique à l'élément HTML. Lorsque conforme aux normes mode n'est pas spécifié, comme avec les versions antérieures de Windows Internet Explorer, cet attribut s'applique à l'élément de CORPS, pas l'élément HTML.

Il est également intéressant de noter que lorsque vous travaillez avec .NET la barre de Défilement de la classe en System.Windows.Controls.Primitives dans le cadre de Présentation est responsable de rendre les barres de défilement.

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs. 85).aspx


Webkit

Webkit extensions liées à la barre de défilement de personnalisation sont:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

enter image description here

Ces peuvent être combinés avec d'autres pseudo-sélecteurs (étendre la liste ci-dessous):

  • :horizontal – L'horizontal pseudo-classe ne s'applique à aucune barre de défilement des pièces qui ont une orientation horizontale.
  • :vertical – À la verticale de la pseudo-classe ne s'applique à aucune barre de défilement des pièces qui ont une orientation verticale.
  • :decrement – La diminution de la pseudo-classe s'applique à des boutons et des musiques. Il indique si oui ou non le bouton de la piste ou pièce décrémenter le point de vue de la position moment de leur utilisation (par exemple, sur une barre de défilement verticale, à gauche sur la barre de défilement horizontale).
  • :increment – L'incrément de la pseudo-classe s'applique à des boutons et des musiques. Il indique si oui ou non un bouton ou une piste de morceau incrémente le point de vue de la position moment de leur utilisation (par exemple, sur une barre de défilement verticale, à droite sur la barre de défilement horizontale).
  • :start – Le début de la pseudo-classe s'applique à des boutons et des musiques. Il indique si l'objet est placé à l'avant de la manette.
  • :end – La fin de la pseudo-classe s'applique à des boutons et des musiques. Il indique si l'objet est placé après le pouce.
  • :double-button – Le double-bouton pseudo-classe s'applique à des boutons et des musiques. Il est utilisé pour détecter si un bouton est partie d'une paire de boutons qui sont ensemble à la même extrémité de la barre de défilement. Pour les pièces il indique que la piste pièce adjacente à une paire de boutons.
  • :single-button – L'unique bouton de la pseudo-classe s'applique à des boutons et des musiques. Il est utilisé pour détecter si un bouton est par lui-même à la fin de la barre de défilement. Pour les pièces il indique que la piste pièce adjacente à un singleton bouton.
  • :no-button – S'applique pour le suivi des pièces et indique si oui ou non les pistes fonctionne au bord de la barre de défilement, c'est à dire, il n'y a pas de bouton à la fin de la piste.
  • :corner-present – S'applique à tous les morceaux de barre de défilement et indique si oui ou non une barre de défilement coin est présent.
  • :window-inactive – S'applique à tous les morceaux de barre de défilement et indique si oui ou non la fenêtre contenant la barre de défilement est actuellement active. (Ces dernières nightlies, cette pseudo-classe s'applique désormais à l' ::sélection ainsi. Nous avons l'intention de l'étendre à travailler avec tout le contenu et de le proposer comme une nouvelle norme pseudo-classe.)

Des exemples de ces combinaisons

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

Référence: https://www.webkit.org/blog/363/styling-scrollbars/


Mozilla

Mozilla a quelques extensions pour manipuler les barres de défilement, mais ils sont tous les recommandé de ne pas être utilisé.

  • -moz-scrollbars-none Ils vous recommandons d'utiliser overflow:hidden à la place de cela.
  • -moz-scrollbars-horizontal Similaire à overflow-x
  • -moz-scrollbars-vertical Similaire à overflow-y
  • -moz-hidden-unscrollable Ne fonctionne qu'à l'intérieur d'un des utilisateurs les paramètres de profil. Désactive le défilement XML racine éléments et désactive l'aide des touches fléchées et de la molette de la souris pour faire défiler des pages web.

Référence: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Plus de détails sur Mozilla

Ce n'est pas vraiment utile pour autant que je sais, mais il est intéressant de noter que l'attribut qui contrôle si oui ou non les barres de défilement sont affichés dans Firefox est: (lien de référence)

  • Attribut: les barres de défilement
  • Type: nsIDOMBarProp
  • Description: L'objet qui contrôle si oui ou non les barres de défilement apparaissent dans la fenêtre. Cet attribut est "remplaçable" en JavaScript. Lecture seule

Dernier mais non le moins, la leçon d'aujourd'hui est le rembourrage est notre ami.

Comme il a été mentionné précédemment dans d'autres réponses, ici, en est une illustration.

enter image description here

437voto

jao Points 5590

Définissez `` sur la balise body comme ceci :

Le code ci-dessus cache la barre de défilement horizontale et verticale.

Si vous souhaitez masquer uniquement la barre de défilement verticale, utiliser `` :

Et si vous souhaitez masquer uniquement la barre de défilement horizontale, utiliser `` :

mise à jour : je voulais dire caché, Désolé, me suis réveillé  :-)

111voto

thgaskell Points 3312

Vous pouvez le faire avec un div wrapper qui a son trop-plein cachée et la div intérieure réglé sur automatique.

Pour supprimer la barre de défilement de la div interne, vous pouvez sortir il de fenêtre d’affichage de la div externe en appliquant une marge négative à l’intérieur div. Puis appliquer remplissage égal à la div interne afin que le contenu reste en vue.

JSFiddle

HTML

CSS

20voto

bmerigan Points 237

``cesse de défiler complètement. Il n’est pas cacher la barre de défilement.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X