Masquer la barre de défilement sur une page HTML

Question

Peut-on utiliser une CSS pour masquer la barre de défilement ? Comment faire ?

Answer 1

WebKit prend en charge les pseudo-éléments de la barre de défilement qui peuvent être masqués à l'aide de règles CSS standard :

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

Si vous voulez que toutes les barres de défilement soient cachées, utilisez

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

Je ne suis pas sûr de la restauration - cela a fonctionné, mais il y a peut-être une bonne façon de procéder :

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

Vous pouvez bien sûr toujours utiliser width: 0 qui peut ensuite être facilement restauré avec width: auto mais je ne suis pas un fan de l'abus. width pour les ajustements de visibilité.

Firefox 64 prend désormais en charge la version expérimentale propriété scrollbar-width par défaut (63 nécessite la mise en place d'un drapeau de configuration). Pour masquer la barre de défilement dans Firefox 64 :

#element {
    scrollbar-width: none;
}

Pour savoir si votre navigateur actuel prend en charge le pseudo-élément ou l'élément scrollbar-width essayez cet extrait :

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

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  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 elle masque également les barres horizontales, mais c'est ce que je cherchais lorsque Google m'a pointé ici, alors je me suis dit que je la posterais quand même).

Answer 2

Oui, en quelque sorte

Lorsque vous posez la question "Est-il possible de supprimer les barres de défilement d'un navigateur d'une manière ou d'une autre, plutôt que de simplement les cacher ou les camoufler", tout le monde vous répondra "Pas possible", car il n'est pas possible de supprimer les barres de défilement de tous les navigateurs d'une manière conforme et intercompatible, et puis il y a tout l'argument de la convivialité.

Toutefois, il est possible d'éviter que le navigateur n'ait jamais besoin de générer et d'afficher des barres de défilement si vous ne permettez pas à votre page Web de déborder.

Cela signifie simplement que nous devons substituer de manière proactive le même comportement que le navigateur ferait normalement pour nous et lui dire merci mais non merci mon pote. Plutôt que d'essayer de supprimer les barres de défilement (ce qui, nous le savons tous, n'est pas possible), nous pouvons éviter le défilement (parfaitement réalisable) et faire défiler les éléments que nous créons et sur lesquels nous avons plus de contrôle.

Créez un div avec overflow hidden. Détectez quand l'utilisateur tente de défiler, mais n'y parvient pas parce que nous avons désactivé la capacité des navigateurs à défiler avec overflow : hidden et déplacez le contenu vers le haut en utilisant JavaScript quand cela se produit. Ainsi, nous créons notre propre défilement sans le défilement par défaut du navigateur ou nous utilisons un plugin tel que iScroll .

---

Dans un souci d'exhaustivité, 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 de la spécification CSS, et n'ont jamais été approuvées ou préfixées par un fournisseur, mais elles fonctionnent dans Internet Explorer et Konqueror. Elles peuvent également être définies localement dans la feuille de style de l'utilisateur pour chaque application. Dans Internet Explorer, vous les trouverez sous l'onglet "Accessibilité", dans Konqueror sous l'onglet "Feuilles de style".

body, html { /* These are defaults and can be replaced by hexadecimal 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'Internet Explorer 8, ces propriétés ont été préfixées par Microsoft, mais elles n'ont toujours pas été approuvées par les autorités compétentes. 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 d'informations sur Internet Explorer

Internet Explorer fait scroll disponible qui définit la désactivation ou l'activation des 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 les versions ultérieures, lorsque vous utilisez la fonction !DOCTYPE déclaration 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'Internet Explorer, cet attribut s'applique à l'élément BODY élément, PAS le site HTML élément.

Il convient également de noter que lorsque l'on travaille avec .NET, la classe ScrollBar de l'application System.Windows.Controls.Primitives du 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

• MSDN. Propriétés de base de l'interface utilisateur
• W3C. À propos des propriétés non standard de la barre de défilement
• MSDN. Classe ScrollBar .NET

---

WebKit

Les extensions WebKit liées à la personnalisation de la barre de défilement sont les suivantes :

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

Chacun d'entre eux peut être combiné avec des pseudo-sélecteurs supplémentaires :

• :horizontal - La pseudo-classe horizontale s'applique à tous les éléments de la barre de défilement qui ont une orientation horizontale.
• :vertical - La pseudo-classe verticale s'applique à tous les éléments 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 morceaux de piste. Elle indique si le bouton ou le track piece décrémente ou non la position de la vue lorsqu'il est utilisé (par exemple, vers le haut sur une barre de défilement verticale, vers la gauche sur une barre de défilement horizontale).
• :increment - La pseudo-classe "incrément" s'applique aux boutons et aux morceaux de piste. Elle indique si un bouton ou un track piece incrémente ou non la position de la vue lorsqu'il est utilisé (par exemple, vers le bas sur une barre de défilement verticale, vers la droite sur une barre de défilement horizontale).
• :start - La pseudo-classe de départ s'applique aux boutons et aux morceaux de piste. Elle indique si l'objet est placé avant le pouce.
• :end - La pseudo-classe de fin s'applique aux boutons et aux morceaux de piste. Elle indique si l'objet est placé après le pouce.
• :double-button - La pseudo-classe double-bouton s'applique aux boutons et aux morceaux de piste. Elle est utilisée pour détecter si un bouton fait partie d'une paire de boutons qui se trouvent ensemble à la même extrémité d'une barre de défilement. Pour les morceaux de piste, elle indique si le morceau de piste est contigu à une paire de boutons.
• :single-button - La pseudo-classe "single-button" s'applique aux boutons et aux morceaux de piste. Elle est utilisée pour détecter si un bouton est seul à la fin d'une barre de défilement. Pour les morceaux de piste, elle indique si le morceau de piste jouxte un bouton unique.
• :no-button - S'applique aux morceaux de piste et indique si le morceau de piste s'étend ou non jusqu'au 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 actuellement active ou non. (Dans les versions nocturnes récentes, cette pseudo-classe s'applique également à ::selection. Nous prévoyons de l'étendre pour qu'elle fonctionne avec tout contenu et de la proposer comme nouvelle pseudo-classe standard).

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

• Stylisation des barres de défilement - Webkit.org

Plus d'informations sur Chrome

addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler(Window.ScrollHandler handler)

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

---

Mozilla

Mozilla dispose de 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 overflow:hidden à la place.

• -moz-scrollbars-horizontal Similaire à overflow-x

• -moz-scrollbars-vertical Similaire à overflow-y

• -moz-hidden-unscrollable Ne fonctionne qu'en interne, dans les paramètres du profil de l'utilisateur. Désactive le défilement des éléments racine XML et l'utilisation des touches fléchées et de la molette de la souris pour faire défiler les pages Web.

• Documents des développeurs de Mozilla sur "Overflow" (en anglais)

Plus d'informations 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 l'affichage ou non des barres de défilement dans Firefox est ( lien de référence ):

• Attribut :        barres de défilement
• Type :               nsIDOMBarProp
• Description :   L'objet qui contrôle l'affichage ou non des barres de défilement dans la fenêtre. Cet attribut est "remplaçable" en JavaScript. En lecture seule

Enfin et surtout, le rembourrage est comme magique.

Comme cela a déjà été mentionné dans d'autres réponses, voici une illustration qui se passe d'explications.

---

Leçon d'histoire

Par simple curiosité, j'ai voulu me renseigner sur l'origine des barres de défilement, et voici les meilleures références que j'ai trouvées.

• 10 inventions sur le défilement et les barres de défilement
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

Divers

Dans un projet de spécification HTML5, le seamless a été défini pour empêcher les barres de défilement d'apparaître dans les iFrames afin qu'elles puissent se fondre dans le contenu environnant d'une page. . Bien que cet élément n'apparaisse pas dans la dernière révision.

Le site scrollbar L'objet BarProp est un enfant de l'objet window 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 retournera 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 comprend également des fonctions de restauration du défilement lors de la navigation dans la page afin de conserver la position du défilement lors du chargement de la page.

window.history.scrollRestoration peut être utilisé pour vérifier l'état de la restauration par défilement ou pour modifier son état (en ajoutant l'élément ="auto"/"manual" . Auto est la valeur par défaut. La changer en manuel signifie que vous, en tant que développeur, prendrez en charge 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 en poussant les entrées de l'historique avec history.pushState().

---

Pour en savoir plus :

• Barre de défilement sur Wikipédia
• Barre de défilement (Windows)
• La méthode du rouleau
• La méthode Scroll - Microsoft Dev Network
• iScroll sur Github (référencé dans la première section ci-dessus)
• Défilement et barres de défilement : un article de Jakob Nielsen sur l'ergonomie.

Exemples

• Panneaux de défilement indépendants sans défilement du corps (en utilisant uniquement CSS) - Ben Frain (10-21-2014)

Answer 3

Définir overflow: hidden; sur le body une étiquette comme celle-ci :

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

Le code ci-dessus "cache" les barres de défilement horizontale et verticale.

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

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

Et si vous voulez cacher seulement la barre de défilement horizontale utiliser overflow-x :

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

---

Le contenu est coupé si nécessaire pour s'adapter au cadre de remplissage. Aucune barre de défilement n'est fournie, et aucun support permettant à l'utilisateur de faire défiler le contenu (par exemple en le faisant glisser ou en utilisant une molette) n'est autorisé. Le contenu peut être défilé de manière programmatique (par exemple, en définissant la valeur d'une propriété telle que offsetLeft ), donc l'élément est toujours un conteneur de défilement . _{( <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#values" rel="nofollow noreferrer">source </a>)}

Answer 4

Vous pouvez accomplir ceci avec un wrapper div dont le débordement est masqué, et l'élément intérieur div réglé sur auto .

Pour retirer l'intérieur div vous pouvez l'extraire de la barre de défilement externe. div en appliquant une marge négative à l'intérieur de l'image. div . Ensuite, appliquez un rembourrage égal à la div intérieure pour 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 scrollbar width across the devices that 
     * you are supporting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

Answer 5

overflow:hidden arrête complètement le défilement. Il ne fait pas que cacher la barre de défilement.