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

#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 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 un fan d'abuser width pour les retouches de visibilité.

pour voir si votre navigateur actuel supporte cela, 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 réponse correcte à la question parce qu'elle cache aussi les barres horizontales, mais c'est ce que je cherchais quand Google M'a pointé ici, donc j'ai pensé que je le posterais de toute façon.)

Oui, en quelque sorte..

quand vous posez la question, "Est-ce que les barres de défilement d'un navigateur peuvent être enlevées d'une certaine manière, plutôt que simplement caché ou camouflé", tout le monde dira "pas possible" parce qu'il n'est pas possible de supprimer les barres de défilement de tous les navigateurs d'une manière conforme et cross-compatible, et puis il ya tout l'argument de la convivialité.

Toutefois, il est possible d'empêcher le navigateur de jamais avoir le 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 au navigateur Merci, mais non merci buddy. Plutôt que d'essayer d'enlever les barres de défilement (ce qui n'est pas possible, nous le savons tous), nous pouvons éviter le défilement (parfaitement faisable) et le défilement à l'intérieur des éléments que nous fabriquons et avoir plus de contrôle sur.

créer un div avec overflow caché. Détecter lorsque l'utilisateur tente de faire défiler, mais est incapable de le faire parce que nous avons désactivé la capacité des navigateurs de faire défiler avec overflow: hidden.. et déplacez plutôt le contenu en utilisant Javascript lorsque cela se produit. Créer ainsi notre propre défilement sans les navigateurs défilement par défaut ou utiliser un plugin comme iScroll

- - -

par souci de rigueur; tous les méthodes de manipulation des barres de défilement spécifiques au vendeur:

Internet Explorer 5.5+

*ces propriétés n'ont jamais fait partie de la spécification CSS, pas plus qu'elles n'ont jamais été approuvées ou préfixées par le vendeur, mais elles fonctionnent dans Internet Explorer et Konqueror. Ceux-ci peuvent également être définis localement dans la feuille de style de l'utilisateur pour chaque application. Dans IE vous le trouverez sous l'onglet "Accessibility", 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 de IE8, ces propriétés étaient préfixées par Microsoft mais n'ont jamais été approuvées par 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 rend scroll disponible qui définit si oui 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 plus tard, lorsque vous utilisez le !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 précédentes D'IE, cet attribut s'applique à l'élément BODY , et non l'élément HTML .

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 de rendre les barres de défilement.

Les extensions Webkit liées à la personnalisation par 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 être combinés avec des pseudo-sélecteurs supplémentaires:

• :horizontal – la pseudo-classe horizontale s'applique à tous les morceaux de barre de défilement qui ont une orientation horizontale.
• :vertical - la pseudo-classe verticale s'applique à toutes les pièces de barre de défilement qui ont orientation verticale.
• :decrement – la pseudo-classe de décrément s'applique aux boutons et aux pièces de piste. Il indique si le bouton ou le morceau de piste décrémente ou non la position de la vue lorsqu'il est utilisé (par exemple, sur une barre de défilement verticale, gauche sur une barre de défilement horizontale).
• :increment – la pseudo-classe incrément s'applique aux boutons et aux morceaux de piste. Il indique si oui ou non un bouton ou morceau de piste augmentera la position de la vue quand utilisés (par exemple, sur une barre de défilement verticale, à droite sur la barre de défilement horizontale).
• :start – la pseudo-classe de démarrage s'applique aux boutons et aux pièces de piste. Il indique si l'objet est placé devant le pouce.
• :end – la pseudo-classe de fin s'applique aux boutons et aux pièces 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 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 – la pseudo-classe à simple bouton s'applique aux boutons et aux pièces de piste. Il est utilisé pour détecter si un bouton est par lui-même à l'extrémité d'une barre de défilement. Pour les track pieces, il indique si le track piece est adjacent à un bouton singleton.
• :no-button – S'applique aux pièces de voie et indique si la pièce de voie court ou non jusqu'au bord de la barre de défilement, c.-à-d. qu'il n'y a pas de bouton à cette extrémité de la voie.
• :corner-present – S'applique à toutes les pièces de scrollbar et indique si oui ou non un coin de scrollbar est présent.
• :window-inactive – S'applique à toutes les pièces de scrollbar et indique si la fenêtre contenant le scrollbar est actuellement active ou non. (Ces dernières nightlies, cette pseudo-classe s'applique maintenant aussi à ::selection. Nous prévoyons de l'étendre pour travailler avec n'importe quel contenu et de le proposer comme une 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 */ }

• Le Style Des Barres De Défilement - Webkit.org

plus de détails sur le Chrome

addWindowScrollHandler

public static HandlerRegistration addWindowScrollHandler (Window.ScrollHandler handler)

ajoute une fenêtre.ScrollEvent handler

Paramètres:

  gestionnaire - 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 a quelques extensions pour manipuler les barres de défilement, mais elles sont toutes recommandées pour ne pas être utilisées.

• -moz-scrollbars-none Ils recommandent d'utiliser overflow: 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 de profil des utilisateurs. Désactiver le défilement des éléments racine XML et désactiver l'utilisation des touches fléchées et de la molette de souris pour faire défiler les pages web.

• Mozilla Developer Docs sur 'Débordement'

autres détails à propos de 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 oui ou non les barres de défilement sont affichées dans Firefox est: ( lien de référence )

• attribut: scrollbars
• Type: nsIDOMBarProp
• Description: l'objet qui contrôle si oui ou non les barres de défilement sont affichées dans la fenêtre. Cet attribut est "remplaçable" en JavaScript. Lire seulement

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

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

---

cours 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 défilement et Parchemin
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

Divers

dans une ébauche de spécification HTML5, l'attribut seamless 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 ne figure pas dans la dernière révision.

L'objet BarProp scrollbar 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 renvoie 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'histoire inclut également des fonctionnalités pour la restauration de défilement sur la navigation de page à maintenez la position de défilement sur le chargement de la page. window.history.scrollRestoration peut être utilisé pour vérifier le statut de scrollrestoration ou changer son statut (en annexe ="auto"/"manual" . Auto est la valeur par défaut. Changement manuel signifie que vous en tant que le développeur va prendre possession de défilement changements qui pourraient être nécessaires lorsqu'un utilisateur parcourt l'application de son histoire. Si vous avez besoin, vous pouvez garder la trace de la position de défilement pendant que vous poussez des entrées d'histoire avec l'histoire.pushState().

---

autres lectures:

• barre de Défilement sur la page Wikipedia
• de la barre de Défilement (Windows)
• Le Livre De La Méthode
• Le Livre De La Méthode De Microsoft Dev Réseau
• iScroll sur Github (référencé dans la première section ci-dessus)
• et de Défilement les Barres de défilement d'un article sur l'ergonomie par Jakob Nielsen

exemples

• panneaux de défilement Indépendants sans défilement de corps (utilisant seulement CSS) - Ben Frain (10-21-2014)

vous pouvez accomplir ceci avec une div wrapper qui a son débordement caché, et la div intérieure réglée à auto.

pour supprimer la barre de défilement de la div interne, vous pouvez la retirer du viewport de la div externe en appliquant une marge négative à la div interne. Ensuite, appliquez le rembourrage égal à la div intérieure de sorte que le contenu reste dans la vue.

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

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 quand vous cachez la barre de défilement avec padding-right , parce que la largeur de la barre de défilement est différente sur chaque navigateur.

Note: Dans les dernières versions de Firefox la propriété -moz-scrollbars-none est dépréciée ( link ).

je pense que j'ai trouvé un travail pour vous si vous êtes toujours intéressés. C'est ma première semaine, mais il a travaillé 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 cacher une barre de défilement pour les appareils mobiles, suivez réponse de Peter !

voici un jsfiddle , qui utilise la solution ci-dessous pour cacher 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).

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: hide scrollbar tout en pouvant faire défiler avec la souris / clavier

Utiliser css propriété overflow :

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

Voici d'autres exemples:

• http://www.brunildo.org/test/Overflowxy2.html
• http://css-tricks.com/the-css-overflow-property/

de la Croix-Navigateur le masquage de la barre de défilement.

Bord Testé, Chrome, Firefox, Safari

Cacher scrollbar tout en étant en mesure de faire défiler avec la roue 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;
}

en plus de la réponse de Pierre:

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

ce sera la même chose pour IE10:

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

si vous voulez que le défilement fonctionne, avant de cacher des barres de défilement, envisagez le style ils. Les versions modernes D'OS X et mobile OS ont des barres de défilement impraticable pour saisir avec une souris, sont assez belles et neutres.

Pour masquer les barres de défilement, une technique par John Kurlak fonctionne bien sauf pour les laissant Les utilisateurs de Firefox qui n'ont pas de touchpads avec aucun moyen de faire défiler à moins qu'ils avoir une souris avec une molette, dont ils n'ont probablement, mais même alors ils peuvent habituellement seulement 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 taille de l'élément central et faire il ont des barres de défilement.

il doit être possible de régler la taille des éléments extérieurs et du contenu. même ce qui élimine l'utilisation de pourcentages, mais je ne peux pas penser à autre chose que ne fonctionne pas avec le droit de les retravailler.

ma plus grande préoccupation est de savoir si toutes les versions de navigateurs définir scrollbars à faire contenu débordé visible visible. J'ai testé dans les navigateurs actuels, mais pas plus âgés.

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

test

OS X est 10.6.8. Windows est Windows 7.

• Firefox 32.0 Les barres de défilement caché. Les touches fléchées ne font pas défiler, même après avoir cliqué pour se concentrer, mais souris wheel et deux doigts sur trackpad le font. OS X et Windows.
• Chrome 37.0 Les barres de défilement caché. Les touches fléchées fonctionnent après avoir cliqué pour se concentrer. Molette de la souris et trackpad travaille. OS X et Windows.
• Internet Explorer 11 Les barres de défilement caché. Les touches fléchées fonctionnent après avoir cliqué pour se concentrer. Molette de la souris travail. Windows.
• Safari 5.1.10 Les barres de défilement caché. Les touches fléchées fonctionnent après avoir cliqué pour se concentrer. Molette de la souris et trackpad travaille. OS X.
• Android 4.4.4 et 4.1.2. Les barres de défilement caché. Défilement tactile fonctionne. Essayé dans Chrome 37.0, Firefox 32.0, et HTMLViewer sur 4.4.4 (peu importe ce que c'est). Dans HTMLViewer, la page est de la taille du contenu masqué et peut être scrollé aussi! Défiler interagit de façon acceptable avec zoom sur les pages.

juste pensé que je ferais remarquer à n'importe qui d'autre lisant cette question que le réglage overflow: hidden (ou overflow-y) sur l'élément de corps n'a pas caché les barres de défilement pour moi. J'ai dû utiliser L'élément HTML.

mon html est comme ceci

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

ajoutez ceci à votre div où vous voulez cacher le scrollbar

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

et ajouter ce texte au conteneur

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

j'ai écrit une version de webkit avec certaines options comme masquer automatiquement , "151920920 de la" petite "version 151930920" , faites défiler jusqu' seulement-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

ma réponse défilera même si overflow:hidden; en utilisant jquery

par exemple faire défiler horizontalement avec la roue 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 crois que vous pouvez le manipuler avec l'attribut CSS overflow, mais ils ont le soutien de navigateur limité. Une source a dit que C'était IE5+, Firefox 1.5+, et Safari 3+ - peut-être assez pour vos besoins.

ce lien a une bonne discussion: http://www.search-this.com/2008/03/26/scrolling-scrolling-scrolling /

pour désactiver la barre de défilement verticale, il suffit d'ajouter: overflow-y:hidden;

en savoir plus sur: overflow