Masquer la barre de défilement, mais tout en étant capable de défilement

Easy in Webkit, avec un style optionnel:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

ça marche pour moi:

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

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

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

c'est une astuce pour chevaucher quelque peu scrollbar avec un chevauchement div qui n'a pas de barres de défilement

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

uniquement pour les navigateurs webkit.. ou vous pouvez utiliser des CSS spécifiques au navigateur (s'il y en a à l'avenir) chaque navigateur pourrait avoir une propriété différente et spécifique pour leurs barres respectives

-- EDIT--

pour Microsoft Edge utiliser: -ms-overflow-style: -ms-autohiding-scrollbar; ou -ms-overflow-style: none; comme par MSDN .

il n'y a pas d'équivalent pour FF Bien qu'il y ait un plugin JQuery pour réaliser ceci http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

voici une autre façon qui n'a pas encore été mentionnée. C'est très simple et n'implique que deux divs et CSS. Aucun JavaScript ou CSS propriétaire est nécessaire et il fonctionne dans tous les navigateurs. Il n'est pas non plus nécessaire de définir explicitement la largeur du conteneur, ce qui le rend fluide.

cette méthode utilise la marge négative pour déplacer le scrollbar hors du parent et ensuite la même quantité de rembourrage pour repousser le contenu à sa position originale. La technique fonctionne pour défilement vertical, horizontal et bidirectionnel.

démos:

• Verticale
• Horizontale
• les deux directions

exemple de code pour la version verticale:

HTML:

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

.parent{
  width: 400px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}
.child{
  height: 100%;
  margin-right: -50px; /* maximum width of scrollbar */
  padding-right: 50px; /* maximum width of scrollbar */
  overflow-y: scroll;
}

Ce Réponse ne comprend pas le code, voici donc la solution de page :

selon la page cette approche n'a pas besoin de connaître la largeur du scrollbar à l'avance afin de travailler et la solution fonctionne pour tous les navigateurs aussi, et peut être vu ici .

la bonne chose est que vous n'êtes pas forcé d'utiliser le rembourrage ou les différences de largeur pour cacher la défilement.

c'est aussi zoom sûr. Les solutions de rembourrage/largeur montrent la barre de défilement lorsque zoomée au minimum.

FF fix: http://jsbin.com/mugiqoveko/1/edit?output

.element,
.outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
  display: none;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
      dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
      aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
      vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
    </div>
  </div>
</div>

il suffit D'utiliser les 3 lignes suivantes et votre problème sera résolu:

 #liaddshapes::-webkit-scrollbar {
        width: 0 !important;
    }

où liaddshape est le nom de div où scrool est en route.

HTML:

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

appliquer CSS en conséquence.

Vérifier ici (testé en IE et FF).

#subparant{
    overflow:hidden;    
    width: 500px;
    border: 1px rgba(0,0,0,1.00) solid;
}

#parent{
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity:10%;
}

#child{
    width:511px;
    background-color:rgba(123,8,10,0.42);
}

<body>
    <div id="subparant">
        <div id="parent">
            <div id="child">
                <!- code here for scroll ->
            </div>
        </div>
     </div>
 </body>

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

Appelez ces fonctions, pour tout point que vous voulez charger ou décharger ou recharger les barres de défilement. Encore défilement Chrome que je l'ai testé en Chrome. Pas sûr des autres navigateurs.

ajouter du rembourrage à un intérieur div , comme dans la réponse actuellement acceptée, ne fonctionnera pas si pour une raison quelconque, vous voulez utiliser box-model: border-box .

ce qui fonctionne dans les deux cas, c'est d'augmenter la largeur du div intérieur à 100% plus la largeur de la barre de défilement (en supposant overflow: hidden sur la div externe).

par exemple, dans CSS:

.container2 {
    width: calc(100% + 19px);
}

En Javascript, croix-navigateur:

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';

C'est comme ça que je le fais pour le scroll horizontal, seulement CSS et fonctionne bien avec des cadres comme bootstrap / col-*. Il ne nécessite que 2 div supplémentaires et le parent avec une largeur ou Max-largeur défini:

Vous pouvez sélectionner le texte pour le faire défiler ou faire défiler avec les doigts si vous avez un écran tactile.

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.row {width:100%}
.col-xs-4 {width:33%;float:left}
.col-xs-3 {width:25%;float:left}
.bg-gray{background-color:#DDDDDD}
.bg-orange{background-color:#FF9966}
.bg-blue{background-color:#6699FF}
.bg-orange-light{background-color:#FFAA88}
.bg-blue-light{background-color:#88AAFF}

<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

version courte pour les gens paresseux:

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.parent-style {width:100px;background-color:#FF9966}

<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>

perfect-scrollbar plugin semble être la voie à suivre, voir: https://github.com/noraesae/perfect-scrollbar

il est bien documenté et complète solution basée sur JS pour la question des barres de défilement.

Démo page: http://noraesae.github.io/perfect-scrollbar /

sur les navigateurs modernes, vous pouvez utiliser wheel event https://developer.mozilla.org/en-US/docs/Web/Events/wheel

// content is the element you want to apply the wheel scroll effect
content.addEventListener('wheel', function(e) {
  const step = 100; // how many pixels to scroll
  if(e.deltaY > 0 ) // scroll down
     content.scrollTop += step;
  else //scroll up
     content.scrollTop -= step;
});

mon problème : Je ne veux aucun style dans mon html, je veux directement mon corps scrollable sans aucune barre de défilement, et seulement un scroll vertical, travaillant avec CSS-grids pour n'importe quelle taille d'écran.

Le box-sizing valeur de l'effet de rembourrage ou de la marge de solution, on travaille avec des box-sizing:content-box .

j'ai encore besoin de la directive "- moz-scrollbars-none", et comme gdoron et Mr_Green, j'ai dû cacher la défilement. J'ai essayé-moz-transform et-moz-padding-start, pour ne toucher que firefox, mais il y avait des effets secondaires réactifs qui nécessitaient beaucoup de travail.

cette solution fonctionne pour le contenu html avec le style" display: grid " et elle est responsive.

/* hide html and body scroll bar in css-grid context */
html,body{
  position: static; /* or relative or fixed ... */
  box-sizing: content-box; /* important for hidding scrollbar */
  display: grid; /* for css-grid */
  /* full screen */
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}
html{
  -ms-overflow-style: none;  /* IE 10+ */
  overflow: -moz-scrollbars-none; /* should hide scroll bar */
}
/* no scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none; /*  might be enought */
  background: transparent;
  visibility: hidden;
  width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
  /* Make html with overflow hidden */
  html{
    overflow: hidden;
  }
  /* Make body max height auto */
  /* set right scroll bar out the screen  */
  body{
    /* enable scrolling content  */
    max-height: auto;
    /* 100vw +15px : trick to set the scroll bar out the screen */
    width: calc(100vw + 15px);
    min-width: calc(100vw + 15px);
    max-width: calc(100vw + 15px);
    /* set back the content inside the screen */
    padding-right: 15px;
  }
}
body{
  /* allow vertical scroll */
  overflow-y: scroll;
}

ce sera au corps:

<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>

et c'est la css:

#maincontainer 
{
background:grey ;
width:101%;
height:101%;
overflow:auto;
position:fixed;
}

#child 
{
background: white;
height:500px;
}

il s'agit d'une solution Divis-esque qui devrait néanmoins fonctionner pour tous les navigateurs...

le balisage est comme suit, et doit être à l'intérieur de quelque chose avec un positionnement relatif (et sa largeur doit être réglée, par exemple 400px):

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

The CSS:

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}

je me trouve à essayer les solutions ci-dessus dans mon projet et pour une raison quelconque, je n'ai pas été en mesure de cacher la barre de défilement en raison de div positionnement. Par conséquent, j'ai décidé de cacher la barre de défilement en introduisant une div qui la couvre superficiellement. Exemple ci-dessous pour une barre de défilement horizontale:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

CSS correspondant est le suivant:

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}

une autre façon d'aborder le hacky est de faire overflow-y: hidden et ensuite faire défiler manuellement l'élément avec quelque chose comme ceci:

function detectMouseWheelDirection( e ) {
  var delta = null, direction = false;
  if ( !e ) { // if the event is not provided, we get it from the window object
    e = window.event;
  }
  if ( e.wheelDelta ) { // will work in most cases
    delta = e.wheelDelta / 60;
  } else if ( e.detail ) { // fallback for Firefox
    delta = -e.detail / 2;
  }
  if ( delta !== null ) {
    direction = delta > 0 ? -200 : 200;
  }

  return direction;
}

if ( element.addEventListener ) {
 element.addEventListener( 'DOMMouseScroll', function( e ) {
   element.scrollBy({ 
     top: detectMouseWheelDirection( e ),
     left: 0, 
     behavior: 'smooth' 
  });
 });
}

il y a un grand article sur la façon de détecter et de gérer onmousewheel événements dans deepmikoto's blog. Cela pourrait fonctionner pour vous, mais c'est définitivement pas une solution élégante.

un Autre de simples travail violon .

#maincontainer {
    background: orange;
    width:200px;
    height:200px;
    overflow:hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width:200px;
    height:200px;
    top:20px;
    left:20px;
    overflow:auto;
}

Overflow hidden sur le conteneur parent, de dépassement et de l'auto sur le conteneur enfant. Simple.

pas sûr si je suis trop tard pour le parti mais ajoutant

    overflow: -moz-scrollbars-none;

a travaillé pour moi

il suffit de régler la largeur de la largeur de l'enfant à 100% , padding à 15px, overflow-x pour faire défiler et déborder:caché pour le parent et quelle que soit la largeur que vous voulez, il fonctionne parfaitement sur tous les principaux navigateurs, y compris IE Edge à l'exception de IE8 et inférieur.

j'ai eu ce problème. Super simple à réparer. obtenez deux conteneurs. L'intérieur sera votre conteneur et l'extérieur abritera évidemment l'intérieur:

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

Super simple et devrait fonctionner avec n'importe quel navigateur. Bonne Chance!