Masquer la barre de défilement, mais tout en pouvant défiler

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

Dans Google Chrome c’est:

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

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

J’ai aussi essayé ceci en CSS:

 overflow: hidden; 

Cela cache la barre de défilement, mais je ne peux plus défiler.

Est-il possible de supprimer la barre de défilement tout en faisant défiler la page entière? Avec juste CSS ou HTML, s’il vous plaît.

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:

Étant donné que la largeur de la barre de défilement diffère selon les navigateurs, il est préférable de la gérer avec JavaScript. Si vous faites Element.offsetWidth - Element.clientWidth , la largeur exacte de la barre de défilement apparaîtra.

JavaScript de travail

ou

Utilisation de la 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

JavaScript de travail

Info:

Sur la base de cette réponse, j’ai créé un plugin de défilement simple . J’espère que cela aidera quelqu’un.

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

Cela fonctionne pour moi:

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

Remarque: Dans les dernières versions de Firefox, la propriété -moz-scrollbars-none est obsolète ( lien ).

 
My scroll-able area

c’est une astuce pour chevaucher un peu la barre de défilement avec un div qui se chevauche qui n’a aucune barre de défilement

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

ceci est seulement pour les navigateurs webkit .. ou vous pouvez utiliser le css spécifique au navigateur (s’il y en a à l’avenir) chaque navigateur peut avoir une propriété différente et spécifique pour leurs barres respectives

–MODIFIER–

Pour Microsoft Edge, utilisez: -ms-overflow-style: -ms-autohiding-scrollbar; ou -ms-overflow-style: none; selon MSDN .

Il n’y a pas d’équivalent pour FF Bien qu’il existe un plugin JQuery pour y parvenir http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Cette réponse n’inclut pas le code, alors voici la solution de la page :

Selon la page, cette approche n’a pas besoin de connaître la largeur de la barre de défilement à l’avance pour fonctionner et la solution fonctionne aussi pour tous les navigateurs, et peut être vue ici .

La bonne chose est que vous n’êtes pas obligé d’utiliser des différences de remplissage ou de largeur pour masquer la barre de défilement.

Ceci est aussi un zoom sûr. Les solutions de rembourrage / largeur affichent la barre de défilement lorsque le zoom est effectué au minimum.

Correctif FF: 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; } 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu sortingstique tellus dignissim quis. Integer condimentum ulsortingces 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 sortingstique 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 ulsortingces, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ulsortingcies.

Voici un autre moyen qui n’a pas encore été mentionné. C’est très simple et n’implique que deux div et CSS. Aucun code JavaScript ou CSS propriétaire n’est requirejs et cela fonctionne dans tous les navigateurs. Il ne nécessite pas de définir explicitement la largeur du conteneur ni de le rendre ainsi fluide.

Cette méthode utilise une marge négative pour déplacer la barre de défilement du parent, puis la même quantité de remplissage pour ramener le contenu à sa position d’origine. La technique fonctionne pour le défilement vertical, horizontal et bidirectionnel.

Démos:

  • Verticale
  • Horizontal
  • Les deux directions

Exemple de code pour la version verticale:

HTML:

 
Your content.

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

Utilisez simplement 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 train de passer.

 #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); }  
 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 souhaitez charger ou décharger ou recharger les barres de défilement. Toujours défilable dans Chrome comme je l’ai testé dans Chrome. Pas sûr des autres navigateurs.

HTML:

 

CSS:

 .parent{ position: relative; width: 300px; height: 150px; border: 1px solid black; overflow: hidden; } .child { height: 150px; width: 318px; overflow-y: scroll; } 

Appliquez le CSS en conséquence.

Vérifiez-le ici (testé dans IE et FF).

Ajouter un remplissage à une div interne, comme dans la réponse actuellement acceptée, ne fonctionnera pas si, pour une raison quelconque, vous souhaitez utiliser un box-model: border-box .

Ce qui fonctionne dans les deux cas, c’est d’augmenter la largeur de la div interne à 100% plus la largeur de la barre de défilement (en supposant un overflow: hidden sur la div externe).

Par exemple, en CSS:

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

En Javascript, cross-browser:

 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 défilement horizontal, uniquement CSS et fonctionne bien avec les frameworks comme bootstrap / col- *. Il ne nécessite que 2 div supplémentaires et le parent avec un ensemble largeur ou largeur maximale:

Vous pouvez sélectionner le texte pour le faire défiler ou le 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} 
  
Column 1
Column 2
Column 3
Content 1
This content too long for the container, so it needs to be hidden but scrollable without scrollbars
Content 3

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

Il est bien documenté et complète la solution basée sur JS pour le problème des barres de défilement.

Page de démonstration: http://noraesae.github.io/perfect-scrollbar/

Sur les navigateurs modernes, vous pouvez utiliser l’ 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 pas de style dans mon HTML, je veux directement faire défiler mon corps sans aucune barre de défilement, et seulement un défilement vertical, travaillant avec css-grids pour n’importe quelle taille d’écran.

La valeur d’encodage a un impact sur les solutions de remplissage ou de marge, elles fonctionnent avec le redimensionnement par boîte: content-box .

J’ai toujours besoin de la directive “-moz-scrollbars-none”, et comme gdoron et Mr_Green, j’ai dû cacher la barre de défilement. J’ai essayé -moz-transform et -moz-padding-start pour avoir un impact uniquement sur Firefox, mais il y avait des effets secondaires réactifs qui nécessitaient beaucoup de travail.

Cette solution fonctionne pour du contenu HTML avec le style “display: grid” et elle est réactive.

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

 
this is the 1st step
this is the 2nd step
this is the 3rd step

et c’est le css:

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

Ceci est une solution divis-esque qui devrait fonctionner pour tous les navigateurs …

Le balisage est le suivant et doit être à l’intérieur de quelque chose avec un positionnement relatif (et sa largeur doit être définie, par exemple 400px):

 

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

J’ai essayé les solutions ci-dessus dans mon projet et pour une raison quelconque, je n’ai pas pu masquer la barre de défilement en raison du positionnement des div. Par conséquent, j’ai décidé de masquer la barre de défilement en introduisant un div le couvrant superficiellement. L’exemple ci-dessous concerne une barre de défilement horizontale:

 
My content that could overflow horizontally
 

Le 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 sorte d’approche pirate consiste à faire un overflow-y: hidden puis à 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 excellent article sur la façon de détecter et de gérer les événements onmousewheel dans le blog de deepmikoto . Cela pourrait fonctionner pour vous, mais ce n’est pas une solution élégante.

Un autre violon de travail simple.

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

Dépassement de capacité masqué sur le conteneur parent et débordement automatique sur le conteneur enfant. Simple.

Je ne sais pas si je suis trop tard pour la fête, mais en ajoutant

  overflow: -moz-scrollbars-none; 

travaillé pour moi

Il suffit de définir la largeur de l’enfant à 100%, à 15px, à overflow-x à faire défiler et à déborder: masqué pour le parent et quelle que soit la largeur souhaitée, il fonctionne parfaitement sur tous les principaux navigateurs, y compris IE Edge à l’exception d’IE8 et inférieur.

J’ai eu ce problème. Super simple à réparer. obtenir deux conteneurs. L’intérieur sera votre conteneur défilable et le périphérique interne hébergera é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!