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

Placez overflow: hidden;sur la balise de 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 souhaitez masquer uniquement la barre de défilement verticale , utilisez overflow-y:

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

Et si vous souhaitez masquer uniquement la barre de défilement horizontale , utilisez overflow-x:

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

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.

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

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

Si vous souhaitez que toutes les barres de défilement soient masquées, utilisez

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

Je ne suis pas sûr de la restauration - 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 ensuite être facilement restauré avec width: auto, mais je ne suis pas un fan d'abus widthpour les ajustements de visibilité.

Firefox 64 prend désormais en charge la propriété expérimentale de largeur de barre de défilement par défaut (63 nécessite la définition d'un indicateur de configuration). Pour masquer la barre de défilement dans Firefox 64:

#element {
    scrollbar-width: none;
}

Pour voir si votre navigateur actuel prend en charge le pseudo-élément ou 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 bonne réponse à la question, car cela masque également les barres horizontales, mais c'est ce que je cherchais lorsque Google m'a pointé ici, alors j'ai pensé que je le publierais de toute façon.)

Oui, en quelque sorte ..

Lorsque vous posez la question "Les barres de défilement d'un navigateur peuvent-elles être supprimées d'une certaine manière, plutôt que simplement cachées ou camouflées", tout le monde répondra "Pas possible" car il n'est pas possible de supprimer les barres de défilement de tous les navigateurs dans un manière compatible et cross-compatible, et puis il y a tout l'argument de l'utilisabilité.

Cependant, il est possible d'empêcher le navigateur d'avoir 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 remplacer de manière proactive le même comportement que le navigateur ferait généralement pour nous et dire merci au navigateur, mais non merci. Plutôt que d'essayer de supprimer les barres de défilement (que nous savons tous que ce n'est pas possible), nous pouvons éviter le défilement (parfaitement faisable) et faire défiler les éléments que nous créons et avoir plus de contrôle sur.

Créez un div avec débordement caché. Détectez quand l'utilisateur essaie de faire défiler, mais n'y parvient pas car nous avons désactivé la capacité des navigateurs à faire défiler avec débordement: caché .. et à la place déplacer le contenu en utilisant JavaScript lorsque cela se produit. Ainsi, nous créons notre propre défilement sans le défilement par défaut du navigateur ou utilisez un plugin comme iScroll .

---

Pour être rigoureux; 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, ni approuvées ni 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 Internet Explorer, vous le trouvez 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 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 d'informations sur Internet Explorer

Internet Explorer rend scrolldisponible qui définit s'il faut ou non 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 !DOCTYPEdé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 avec les versions antérieures d'Internet Explorer, cet attribut s'applique à l' BODYélément, PAS à l' HTMLélément.

Il convient également de noter que lorsque vous travaillez avec .NET, la classe ScrollBar System.Windows.Controls.Primitivesdans 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

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

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

Ceux-ci peuvent chacun ê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 morceaux de piste. Il indique si le bouton ou le morceau de piste décrémentera ou non la position de la vue lorsqu'il est utilisé (par exemple, vers le haut sur une barre de défilement verticale, à gauche sur une barre de défilement horizontale).
• :increment- La pseudo-classe d'incrémentation s'applique aux boutons et aux morceaux de piste. Il indique si un bouton ou un morceau de piste incrémentera la position de la vue lorsqu'il est utilisé (par exemple, vers le bas 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 morceaux de piste. 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 à double bouton s'applique aux boutons et aux morceaux de piste. 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 morceaux de piste, il indique si la pièce de piste vient en appui sur une paire de boutons.
• :single-button- La pseudo-classe à un seul bouton s'applique aux boutons et aux morceaux de piste. Il est utilisé pour détecter si un bouton est seul à la fin d'une barre de défilement. Pour les morceaux de piste, il indique si la pièce de piste est contiguë à un bouton singleton.
• :no-button - S'applique aux morceaux de piste et indique si le morceau de piste va ou non 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 active ou non. (Dans les nightlies récents, cette pseudo-classe s'applique désormais aussi à :: selection. Nous prévoyons de l'étendre pour qu'elle fonctionne avec n'importe quel 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 */ }

• Styling Scrollbars - Webkit.org

Plus de détails sur Chrome

addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler (gestionnaire Window.ScrollHandler)

  Ajoute un gestionnaire Window.ScrollEvent Paramètres: gestionnaire - le gestionnaire Renvoie: 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 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-unscrollableFonctionne uniquement en interne dans les paramètres de profil d'un utilisateur. Désactive le défilement des éléments racine XML et désactive l'utilisation des touches fléchées et de la molette de la souris pour faire défiler les pages Web.

• Documents de développement de Mozilla sur 'Overflow'

Plus de détails sur Mozilla

Pour autant que je sache, ce n'est pas vraiment utile, mais il convient 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
• Description:   objet qui contrôle si les barres de défilement sont affichées ou non dans la fenêtre. Cet attribut est "remplaçable" en JavaScript. Lecture seulement

Enfin, le rembourrage est comme de la magie.

Comme cela a été mentionné précédemment dans certaines autres réponses, voici une illustration suffisamment explicite.

Leçon d'histoire

Juste parce que je suis curieux, je voulais en savoir plus sur l'origine des barres de défilement, et ce sont 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 brouillon de spécification HTML5, l' seamlessattribut a été défini pour empêcher les barres de défilement d'apparaître dans les iFrames afin qu'elles puissent être mélangées avec le contenu environnant sur une page . Bien que cet élément n'apparaisse pas dans la dernière révision.

L' scrollbarobjet BarProp est un enfant de l' windowobjet 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.visiblereviendra truesi 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 Historique comprend également des fonctionnalités de restauration du défilement sur la navigation de page pour conserver la position de défilement lors du chargement de la page.

window.history.scrollRestorationpeut être utilisé pour vérifier l'état de la restauration du défilement ou changer son état (en ajoutant ="auto"/"manual". Auto est la valeur par défaut. Le changer en manuel signifie que vous, en tant que développeur, deviendrez propriétaire de toutes les modifications de défilement qui peuvent être nécessaires lorsqu'un utilisateur parcourt l'historique de l'application. Si vous en avez besoin, vous pouvez garder une trace de la position du défilement lorsque vous poussez des entrées d'historique avec history.pushState ().

---

Lectures complémentaires:

• Barre de défilement sur Wikipédia
• Barre de défilement (Windows)
• La méthode de défilement
• La méthode de défilement - Microsoft Dev Network
• iScroll sur Github (référencé dans la première section ci-dessus)
• Scrolling and Scrollbars un article sur la convivialité par Jakob Nielsen

Exemples

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

Vous pouvez accomplir cela avec un wrapper divdont le débordement est masqué et l' divensemble interne défini sur auto.

Pour supprimer la divbarre de défilement de l'intérieur , vous pouvez la retirer de la divfenêtre extérieure en appliquant une marge négative à l'intérieur div. Ensuite, appliquez un rembourrage égal à la div intérieure 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;
}

Cela fonctionne pour moi avec des propriétés CSS simples:

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

Pour les anciennes versions de Firefox, utilisez: overflow: -moz-scrollbars-none;

Voici ma solution, qui couvre théoriquement tous les navigateurs modernes:

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html peut être remplacé par tout élément dont vous souhaitez masquer la barre de défilement.

_{Remarque : J'ai survolé les 19 autres réponses pour voir si le code que je poste a déjà été couvert, et il semble qu'aucune réponse unique ne résume la situation telle qu'elle est en 2019, bien que beaucoup d'entre elles soient très détaillées. Toutes mes excuses si cela a été dit par quelqu'un d'autre et je l'ai manqué.}

Je pense que j'ai trouvé une solution de contournement pour vous les gars 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;}

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; 
}

Il a été testé sur une tablette Samsung avec Android 4.0.4 (Ice Cream Sandwich, à la fois dans le navigateur natif et Chrome) et sur un iPad avec iOS 6 (à la fois dans Safari et Chrome).

Utilisez la overflowpropriété CSS :

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

Voici quelques exemples supplémentaires:

• tests overflow-x, overflow-y
• La propriété CSS Overflow

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

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.

Voir ma réponse ici pour une solution: Masquer la barre de défilement tout en pouvant faire défiler avec la souris / le clavier

En plus de la réponse de Peter:

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

Cela fonctionnera de la même manière pour Internet Explorer 10:

 #element {
      -ms-overflow-style: none;
 }

Approche multi-navigateur pour masquer la barre de défilement.

Il a été testé sur Edge, Chrome, Firefox et Safari

Cachez la barre de défilement tout en continuant à faire 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;
}

Si vous souhaitez que le défilement fonctionne, avant de masquer les barres de défilement, pensez à les styliser. Les versions modernes d'OS X et d'OS mobiles ont des barres de défilement qui, bien que peu pratiques à saisir avec une souris, sont assez belles et neutres.

Pour masquer les barres de défilement, une technique de John Kurlak fonctionne bien, sauf pour laisser les utilisateurs de Firefox qui n'ont pas de pavés tactiles sans moyen de faire défiler, sauf s'ils ont une souris avec une molette, ce qu'ils font probablement, mais même dans ce cas, ils ne peuvent généralement que faire défiler verticalement .

La technique de John utilise trois éléments:

• Un élément extérieur pour masquer les barres de défilement.
• Un élément central pour avoir les barres de défilement.
• Et un élément de contenu pour définir à la fois la taille de l'élément du milieu et lui donner des barres de défilement.

Il doit être possible de définir la taille des éléments externes et de contenu de la même manière, ce qui élimine l'utilisation de pourcentages, mais je ne peux penser à rien d'autre qui ne fonctionnera pas avec le bon ajustement.

Ma plus grande préoccupation est de savoir si toutes les versions des navigateurs définissent des barres de défilement pour rendre visible le contenu débordé visible. J'ai testé dans les navigateurs actuels, mais pas dans les plus anciens.

Pardonnez mon SASS ; P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

Essai

OS X est 10.6.8. Windows est Windows 7.

• Firefox 32.0 Scrollbars caché. Les touches fléchées ne défilent pas, même après avoir cliqué pour se concentrer, mais la molette de la souris et deux doigts sur le trackpad le font. OS X et Windows.
• Barres de défilement Chrome 37.0 masquées. Les touches fléchées fonctionnent après avoir cliqué pour se concentrer. La molette de la souris et le trackpad fonctionnent. OS X et Windows.
• Barres de défilement d'Internet Explorer 11 masquées. Les touches fléchées fonctionnent après avoir cliqué pour se concentrer. La molette de la souris fonctionne. Les fenêtres.
• Safari 5.1.10 Barres de défilement cachées. Les touches fléchées fonctionnent après avoir cliqué pour se concentrer. La molette de la souris et le trackpad fonctionnent. OS X.
• Android 4.4.4 et 4.1.2. Barres de défilement cachées. Touchez le défilement fonctionne. Testé dans Chrome 37.0, Firefox 32.0 et HTMLViewer sur 4.4.4 (quel qu'il soit). Dans HTMLViewer, la page a la taille du contenu masqué et peut également défiler! Le défilement interagit de manière acceptable avec le zoom de page.

J'ai juste pensé que je ferais remarquer à quiconque lisant cette question que le réglage overflow: hidden(ou le débordement-y) sur l' bodyélément ne masquait pas les barres de défilement pour moi.

J'ai dû utiliser l' htmlélément.

J'ai écrit une version WebKit avec quelques options comme masquer automatiquement , petite version , faire défiler uniquement-y ou seulement-x :

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

Copiez ce code CSS dans le code client pour masquer la barre de défilement:

<style>

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

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

</style>

Mon HTML est comme ceci:

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

Ajoutez ceci à l' divendroit où vous souhaitez masquer la barre de défilement:

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

Et ajoutez ceci au conteneur

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

Pour désactiver la barre de défilement verticale, ajoutez simplement overflow-y:hidden;.

En savoir plus: débordement .

Ma réponse défilera même lorsque overflow:hidden;, à l'aide de jQuery:

Par exemple, faites défiler horizontalement avec la molette de la souris:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

Je pense que vous pouvez le manipuler avec l' overflowattribut CSS, mais ils ont une prise en charge limitée du navigateur. Une source a déclaré qu'il s'agissait d'Internet Explorer 5 (et versions ultérieures), Firefox 1.5 (et versions ultérieures) et Safari 3 (et versions ultérieures) - peut-être assez pour vos besoins.

Scrolling, Scrolling, Scrolling a une bonne discussion.

J'ai tout essayé et ce qui fonctionnait le mieux pour ma solution était de toujours afficher la barre de défilement verticale, puis d'ajouter une marge négative pour la masquer.

body {
  overflow-y: scroll;
  margin-right: -20px;
}