Question Masquage de la barre de défilement sur une page HTML


CSS peut-il être utilisé pour masquer la barre de défilement? Comment ferais-tu ceci?


598
2017-07-21 05:57


origine


Réponses:


Ensemble overflow: hidden; sur l'étiquette du corps comme ceci:

<style type="text/css">
body {
    overflow:hidden;
}
</style>

Le code ci-dessus masque à la fois la barre de défilement horizontale et verticale.

Si vous voulez cacher seulement la barre de défilement verticale, utilisation overflow-y:

<style type="text/css">
body {
    overflow-y:hidden;
}
</style>

Et si tu veux te cacher seulement la barre de défilement horizontale, utilisation overflow-x:

<style type="text/css">
body {
    overflow-x:hidden;
}
</style>

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


Remarque: Cela désactivera également la fonction de défilement. Reportez-vous aux réponses ci-dessous si vous souhaitez simplement masquer la barre de défilement mais pas la fonction de défilement.


347
2017-07-21 06:09



Par souci d'exhaustivité, cela fonctionne pour webkit:

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

Si vous souhaitez masquer toutes les barres de défilement, utilisez

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

Je ne suis pas sûr de restaurer - cela a fonctionné, mais il pourrait y avoir une bonne façon de le faire:

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

Vous pouvez bien sûr toujours utiliser width: 0, qui peut être facilement restauré avec width: auto, mais je ne suis pas fan d'abuser width pour les changements de visibilité.

Pour voir si votre navigateur actuel supporte ceci, essayez 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 bonne réponse à la question car elle cache aussi les barres horizontales, mais c'est ce que je cherchais lorsque Google m'a pointé ici, alors j'ai pensé que je l'afficherais quand même.)


792
2017-11-01 20:07



Oui, en quelque sorte ..

Lorsque vous posez la question «Les barres de défilement d'un navigateur peuvent-elles être supprimées d'une manière ou d'une autre, plutôt que cachées ou camouflées?», Tout le monde dira «pas possible» car il n'est pas possible de retirer les barres de défilement de tous les navigateurs d'une manière compatible et compatible, et puis il y a tout l'argument de la convivialité.

Cependant, il est possible d'empêcher le navigateur de devoir générer et afficher des barres de défilement si vous n'autorisez pas le débordement de votre page Web.

Cela signifie simplement que nous devons substituer proactivement le même comportement que le navigateur ferait pour nous et dire au navigateur merci, mais pas merci mon pote. Plutôt que d'essayer de supprimer les barres de défilement (ce que nous savons tous n'est pas possible), nous pouvons éviter le défilement (parfaitement faisable) et faire défiler les éléments que nous fabriquons et avoir plus de contrôle sur.

Créer un div avec débordement caché. Détecter lorsque l'utilisateur tente de faire défiler mais est incapable de le faire car nous avons désactivé la capacité des navigateurs à faire défiler avec overflow: hidden .. et à la place déplacer le contenu en utilisant Javascript lorsque cela se produit. De ce fait, créer notre propre défilement sans défilement des navigateurs par défaut ou utiliser un plugin comme iScroll

---

Par souci d'être complet; toutes les façons spécifiques au vendeur de manipuler les barres de défilement:

Internet Explorer 5.5+

* Ces propriétés n'ont jamais fait partie des spécifications CSS, elles n'ont jamais été approuvées ou préfixées par le fournisseur, mais elles fonctionnent dans Internet Explorer et Konqueror. Ceux-ci peuvent également être définis localement dans la feuille de style utilisateur pour chaque application. Dans IE vous le trouvez sous l'onglet "Accessibilité", dans Konqueror sous l'onglet "Stylesheets".

body, html { /* these are default, can be replaced by hex color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

À partir d'IE8, ces propriétés étaient préfixées par Microsoft mais n'étaient jamais approuvées par le W3C.

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color 

Plus de détails sur Internet Explorer

IE fait scroll disponible qui définit s'il faut désactiver ou activer les barres de défilement; il peut également être utilisé pour obtenir la valeur de la position des barres de défilement.

Avec Microsoft Internet Explorer 6 et versions ultérieures, lorsque vous utilisez la déclaration! DOCTYPE pour spécifier le mode conforme aux normes, cet attribut s'applique à l'élément HTML. Lorsque le mode conforme aux normes n'est pas spécifié, comme dans les versions antérieures d'IE, cet attribut s'applique à BODY élément, NE PAS la HTML élément.

Il est également intéressant de noter que lorsque vous travaillez avec .NET, la classe ScrollBar dans System.Windows.Controls.Primitives dans le cadre de présentation est responsable du rendu des barres de défilement.

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


Webkit

Les extensions Webkit liées à la personnalisation de la barre de défilement 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

Ceux-ci peuvent être combinés avec des pseudo-sélecteurs supplémentaires:

  • :horizontal - La pseudo-classe horizontale s'applique à toutes les pièces de la barre de défilement qui ont une orientation horizontale.
  • :vertical - La pseudo-classe verticale s'applique à toutes les pièces de la barre de défilement qui ont une orientation verticale.
  • :decrement - La pseudo-classe de décrémentation s'applique aux boutons et aux pistes. Il indique si le bouton ou la piste décale la position de la vue lorsqu'elle est utilisée (par exemple, sur une barre de défilement verticale, à gauche sur une barre de défilement horizontale).
  • :increment - La pseudo-classe d'incrément s'applique aux boutons et aux pistes. Il indique si un bouton ou une piste va incrémenter la position de la vue lorsqu'elle est utilisée (par exemple, sur une barre de défilement verticale, à droite sur une barre de défilement horizontale).
  • :start - La pseudo-classe de départ s'applique aux boutons et aux pistes. Il indique si l'objet est placé avant le pouce.
  • :end - La pseudo-classe de fin s'applique aux boutons et aux morceaux de piste. Il indique si l'objet est placé après le pouce.
  • :double-button - La pseudo-classe à deux boutons s'applique aux boutons et aux pistes. Il est utilisé pour détecter si un bouton fait partie d'une paire de boutons qui sont ensemble à la même extrémité d'une barre de défilement. Pour les pistes, cela indique si la piste est adjacente à une paire de boutons.
  • :single-button - La pseudo-classe à un seul bouton s'applique aux boutons et aux pistes. Il est utilisé pour détecter si un bouton est en lui-même à la fin d'une barre de défilement. Pour les morceaux de piste, cela indique si le morceau de piste bute sur un bouton singleton.
  • :no-button - S'applique aux pistes et indique si la piste suit ou non le bord de la barre de défilement, c'est-à-dire qu'il n'y a pas de bouton à cette extrémité de la piste.
  • :corner-present - S'applique à toutes les pièces de la barre de défilement et indique si un coin de la barre de défilement est présent ou non.
  • :window-inactive - S'applique à toutes les pièces de la barre de défilement et indique si la fenêtre contenant la barre de défilement est active ou non. (Dans les nightlies récents, cette pseudo-classe s'applique maintenant aussi à :: selection Nous avons l'intention de l'étendre pour travailler avec n'importe quel contenu et de le proposer comme une nouvelle pseudo-classe standard.)

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 */ }

Plus de détails sur Chrome

addWindowScrollHandler
  public static HandlerRegistration addWindowScrollHandler (gestionnaire Window.ScrollHandler)

Ajoute un gestionnaire Window.ScrollEvent
  Paramètres:
  gestionnaire - le gestionnaire
  Résultats:
  renvoie l'enregistrement du gestionnaire
  [la source] (http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html#addWindowScrollHandler(com.google.gwt.user.client.Window.ScrollHandler)   )


Mozilla

Mozilla a quelques extensions pour manipuler les barres de défilement, mais il est recommandé de ne pas les utiliser.

  • -moz-scrollbars-none Ils recommandent d'utiliser le débordement: caché à la place de cela.
  • -moz-scrollbars-horizontal Similaire à overflow-x
  • -moz-scrollbars-vertical Similaire à overflow-y
  • -moz-hidden-unscrollable Fonctionne uniquement en interne dans les paramètres d'un profil d'utilisateur. Désactive le défilement des éléments racine XML et désactive à l'aide des touches fléchées et de la molette de la souris pour faire défiler les pages Web.

  • Mozilla Developer Docs sur 'Overflow'

Plus de détails sur Mozilla

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

  • Attribut:barres de défilement
  • Type:nsIDOMBarProp
  • La description:L'objet qui contrôle si les barres de défilement sont affichées dans la fenêtre. Cet attribut est "remplaçable" en JavaScript. Lecture seulement

Dernier point mais non le moindre, le rembourrage est comme de la magie.

Comme cela a déjà été mentionné dans d'autres réponses, voici une illustration suffisamment explicite.

enter image description here


Leçon d'histoire

Scrollbars

Juste parce que je suis curieux, je voulais apprendre à propos de l'origine des barres de défilement et ce sont les meilleures références que j'ai trouvées.

Divers

Dans un brouillon de spécification HTML5, le seamless attribut a été défini pour empêcher les barres de défilement d'apparaître dans les cadres iFrames afin qu'ils puissent être mélangés avec le contenu environnant sur une page.  Bien que cet élément n'apparaisse pas dans la dernière révision.

le scrollbar L'objet BarProp est un enfant de window objet et représente l'élément d'interface utilisateur qui contient un mécanisme de défilement, ou un concept d'interface similaire. window.scrollbars.visible reviendra true si les barres de défilement sont visibles.

interface Window {
  // the current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // truncated

L'API d'historique inclut également des fonctions de restauration de défilement à la navigation de la page pour conserver la position de défilement lors du chargement de la page. window.history.scrollRestoration peut être utilisé pour vérifier l'état de scrollrestoration ou changer son statut (en ajoutant ="auto"/"manual". Auto est la valeur par défaut. En le changeant en manuel signifie que vous, en tant que développeur, assumerez les changements de défilement qui peuvent être nécessaires lorsqu'un utilisateur parcourt l'historique de l'application. Si vous en avez besoin, vous pouvez suivre la position du défilement lorsque vous appuyez sur les entrées de l'historique avec history.pushState ().

---

En lire plus:

Exemples


424
2017-08-29 04:17



Vous pouvez accomplir ceci avec un div wrapper dont le débordement est caché, et le div interne réglé sur auto.

Pour supprimer la barre de défilement de la div interne, vous pouvez la retirer de la fenêtre de div extérieure en appliquant une marge négative à la div interne. Appliquez ensuite un remplissage égal au div interne afin que le contenu reste visible.

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

94
2018-05-20 22:37



Vous pouvez utiliser la propriété CSS overflow et -ms-overflow-style avec une combinaison avec ::-webkit-scrollbar.

Testé sur IE10 +, Firefox, Safari et Chrome et fonctionne bien:

.container {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

C'est une bien meilleure solution que les autres lorsque vous masquez la barre de défilement padding-right, car la largeur de la barre de défilement par défaut est différente sur chaque navigateur.

Remarque: Dans les dernières versions de Firefox le -moz-scrollbars-none la propriété est obsolète ( lien ).


34
2017-08-17 11:10



Je pense que j'ai trouvé un travail pour vous si vous êtes toujours intéressé. C'est ma première semaine mais ça a marché pour moi ..

<div class="contentScroller">
<div class="content">
</div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

17
2018-02-14 09:29



Si vous cherchez une solution pour masquer une barre de défilement pour les appareils mobiles, suivez La réponse de Peter!

Voici un jsfiddle, qui utilise la solution ci-dessous pour masquer une barre de défilement horizontale.

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Testé sur une tablette Samsung avec Android 4.0.4 (à la fois dans le navigateur natif et Chrome) et sur un iPad avec iOS 6 (à la fois dans Safari et Chrome).


11
2017-12-16 20:19



Comme les autres personnes l'ont déjà dit, utilisez le débordement CSS.

Mais si vous voulez toujours que l'utilisateur puisse faire défiler ce contenu (sans que la barre de défilement soit visible), vous devez utiliser JavaScript. Suis ma réponse ici pour une solution: cacher la barre de défilement tout en étant capable de défiler avec la souris ou le clavier


10
2017-07-21 06:27



Utilisation propriété de débordement css:

.noscroll {
  width:150px;
  height:150px;
  overflow: auto; /* or hidden, or visible */
}

Voici d'autres exemples:


10
2017-07-21 06:12



Cross Browser Approche pour masquer la barre de défilement.

Edge testé, Chrome, Firefox, Safari

Masquer la barre de défilement tout en étant capable de défiler avec la molette de la souris! codepen

/* make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* safari and chrome specific style, don't need to make parent invisible because we can style webkit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* make safari and chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* make the child visible */
#child {
    visibility: visible;
}

9
2018-04-19 17:10



Juste pensé que je signalerais à quelqu'un d'autre en lisant cette question que le réglage de débordement: caché (ou débordement-y) sur l'élément de corps n'a pas caché les barres de défilement pour moi. Je devais utiliser l'élément HTML.


5
2017-08-23 20:33