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

je veux pouvoir faire défiler toute la page, mais sans que la barre de défilement soit affichée.

dans Google Chrome il est:

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

mais Mozilla Firefox et Internet Explorer ne semblent pas fonctionner comme ça.

j'ai aussi essayé dans CSS:

overflow: hidden;

qui cache le scrollbar, mais je ne peux plus faire défiler.

est-ce que je peux enlever le scrollbar tout en étant capable de faire défiler toute la page? Avec seulement CSS ou HTML, s'il vous plaît.

717
demandé sur swimfar 2013-05-21 17:11:37
la source

23 ответов

Juste un test qui fonctionne bien.

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Violon De Travail

JavaScript:

depuis, la largeur de la barre de défilement diffère dans différents navigateurs, il est préférable de le traiter avec JavaScript. Si vous faites Element.offsetWidth - Element.clientWidth , la largeur exacte du scrollbar apparaîtra.

Violon De Travail JavaScript

ou

utilisant Position: absolute ,

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

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Violon De Travail

Violon De Travail JavaScript

Info:

basé sur cette réponse, j'ai créé un simple plugin de défilement . J'espère que cela aidera quelqu'un.

563
répondu Mr_Green 2018-04-13 11:30:53
la source

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;
}
237
répondu Anirban Bhui 2015-12-22 20:13:50
la source

ç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 ).

104
répondu Hristo Eftimov 2017-01-26 14:21:22
la source
<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

60
répondu Arpit Singh 2016-10-20 09:35:33
la source

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:

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;
}
32
répondu Richrd 2018-08-31 19:21:17
la source

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>
30
répondu Timo Kähkönen 2017-05-23 15:03:09
la source

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.

14
répondu Innodel 2014-10-22 08:20:40
la source

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).

7
répondu Mischa 2017-05-07 23:22:32
la source
#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>
7
répondu Owais 2017-05-07 23:24:02
la source
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.

6
répondu user43353 2014-08-03 19:17:14
la source

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 + ')';
4
répondu herman 2016-04-14 01:12:01
la source

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>
4
répondu Jean 2016-12-07 18:18:17
la source

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 /

4
répondu jmarceli 2017-01-09 01:31:27
la source

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;
});
4
répondu Doua Beri 2017-11-12 17:22:54
la source

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;
}
4
répondu Lucile Fievet 2018-06-27 14:40:39
la source

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;
}
3
répondu Hilla 2014-04-25 23:06:02
la source

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;
}
3
répondu 2016-11-13 00:34:08
la source

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*/
}
3
répondu Sriram Ranganathan 2018-01-15 12:03:50
la source

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.

2
répondu Gark Garcia 2018-08-15 17:14:59
la source

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.

1
répondu geoyws 2014-04-11 07:11:26
la source

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

    overflow: -moz-scrollbars-none;

a travaillé pour moi

0
répondu BooBailey 2013-11-27 01:34:39
la source

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.

0
répondu Sibongiseni Bentley Msomi 2015-10-20 18:15:15
la source

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!

-1
répondu Jordan Michael Rushing 2014-07-17 03:17:09
la source