Masquer la barre de défilement, tout en continuant à faire défiler
Je veux pouvoir faire défiler toute la page, mais sans afficher la barre de défilement.
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 faire défiler.
Est-il possible de supprimer la barre de défilement tout en continuant à faire défiler la page entière? Avec juste CSS ou HTML, s'il vous plaît.
Juste un test qui fonctionne bien.
#parent{
width: 100%;
height: 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 */
}
JavaScript:
Étant donné que la largeur de la barre de défilement varie 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.
ou
Utiliser Position: absolute,
#parent{
width: 100%;
height: 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;
}
JavaScript fonctionne avec violon
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.
C'est 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 avec des propriétés CSS simples:
.container {
-ms-overflow-style: none; // IE 10+
scrollbar-width: none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}
PDATED: a ajouté la nouvelle propriété scrollbar-width pour Firefox.
Pour les anciennes versions de Firefox, utilisez: overflow: -moz-scrollbars-none;
UPDATE: Firefox prend maintenant en charge le masquage des barres de défilement avec CSS, de sorte que tous les principaux navigateurs sont désormais couverts (Chrome, Firefox, IE, Safari, etc.).
Appliquez simplement le CSS suivant à l'élément que vous souhaitez supprimer des barres de défilement:
.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
C’est la solution la moins compliquée pour tous les navigateurs que je connaisse actuellement. Découvrez la démo.
RÉPONSE ORIGINALE:
Voici une autre manière qui n'a pas encore été mentionnée. C'est vraiment simple et implique seulement deux divs et CSS. Aucun JavaScript ou CSS propriétaire n'est nécessaire et cela fonctionne dans tous les navigateurs. Il ne nécessite pas non plus de régler explicitement la largeur du conteneur, le rendant ainsi fluide.
Cette méthode utilise une marge négative pour déplacer la barre de défilement hors du parent, puis la même quantité de bourrage pour repousser le contenu à sa position d'origine. La technique fonctionne pour le défilement vertical, horizontal et dans les deux sens.
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;
}
Utilisation:
<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 la barre de défilement avec un div qui se chevauche et qui n'a aucune barre de défilement:
::-webkit-scrollbar {
display: none;
}
Ceci est seulement pour WebKit navigateurs ... Ou vous pouvez utiliser du contenu 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.
Pour Microsoft Edge, utilisez: -ms-overflow-style: -ms-autohiding-scrollbar; ou -ms-overflow-style: none; comme par MSDN .
Il n'y a pas d'équivalent pour Firefox. 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, voici donc la solution de 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 également pour tous les navigateurs. Elle est visible 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.
C'est aussi un zoom sécurisé. Les solutions de rembourrage/largeur affichent la barre de défilement lorsque le zoom est au minimum.
Correctif Firefox: 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>Utilisez juste les trois lignes suivantes et votre problème sera résolu:
#liaddshapes::-webkit-scrollbar {
width: 0 !important;
}
Où liaddshapes est le nom de la div où scroll vient.
Ce qui suit fonctionnait pour moi sur Microsoft, Chrome et Mozilla pour un élément div spécifique:
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}
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;
}
Appliquez CSS en conséquence.
Vérifiez-le ici (testé dans Internet Explorer et Firefox).
À compter du 11 décembre 2018 (Firefox 64 et supérieur), la réponse à cette question est très simple, car Firefox 64+ implémente désormais la spécification CSS Scrollbar Styling spec .
Il suffit d'utiliser le CSS suivant:
scrollbar-width: none;
Lien vers la note de publication de Firefox 64 ici .
Utilisation:
#subparent{
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="subparent">
<div id="parent">
<div id="child">
<!- code here for scroll ->
</div>
</div>
</div>
</body>
Cela fonctionne pour moi:
scroll-content {
overflow-x: hidden;
overflow-y: scroll;
}
scroll-content::-webkit-scrollbar{
width: 0;
}
Mon problème: je ne veux pas de style dans mon HTML, je veux directement mon corps défilable sans barre de défilement, et seulement un défilement vertical, travaillant avec des grilles css pour toutes les tailles d'écran.
Le box-sizing valeur impact padding ou solutions de marge, ils fonctionnent avec box-sizing: content-box.
J'ai toujours besoin de la directive "-moz-scrollbars-none" et, comme Gdoron et Mr_Green, je devais masquer la barre de défilement. J'ai essayé -moz-transform et -moz-padding-start, pour ne toucher que Firefox, mais certains effets secondaires réactifs nécessitaient beaucoup de travail.
Cette solution fonctionne pour le contenu de corps html avec le style "display: grid" et est réactif.
/* 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;
}
Utilisation
function reloadScrollBars() {
document.documentElement.style.overflow = 'auto'; // Firefox, Chrome
document.body.scroll = "yes"; // Internet Explorer only
}
function unloadScrollBars() {
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // Internet Explorer only
}
Appelez ces fonctions pour chaque point que vous souhaitez charger ou décharger ou recharger les barres de défilement. Il est toujours possible de faire défiler le contenu de Chrome comme je l’ai testé sous Chrome, mais je ne suis pas sûr des autres navigateurs.
Sur les navigateurs modernes, vous pouvez utiliser wheel eventhttps://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;
});
L'ajout d'un remplissage à un div intérieur, comme dans la réponse actuellement acceptée, ne fonctionnera pas si, pour une raison quelconque, vous souhaitez utiliser box-model: border-box.
Ce qui fonctionne dans les deux cas est d'augmenter la largeur de div à 100% plus la largeur de la barre de défilement (en supposant que overflow: hidden sur le div externe).
Par exemple, en CSS:
.container2 {
width: calc(100% + 19px);
}
En Javascript, navigateur croisé:
var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';
Voici comment je le fais pour le défilement horizontal, uniquement en CSS et fonctionne bien avec des frameworks tels que bootstrap/col- *. Il n'a besoin que de 2 div supplémentaires et du 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}<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 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>Cela fonctionne pour tous les navigateurs, cependant, cela ne masque pas les barres de défilement natives sur les navigateurs mobiles
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* IE 11 */
&::-webkit-scrollbar { /** Webkit */
display: none;
}
}
Le plug-in perfect-scrollbar semble être la solution, voir: https://github.com/noraesae/perfect-scrollbar
C'est une solution bien documentée et complète basée sur JS pour le problème des barres de défilement.
Page de démonstration: http://noraesae.github.io/perfect-scrollbar/
C'est une solution de divitis-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 définie, par exemple 400px):
<div class="hide-scrollbar">
<div class="scrollbar">
<div class="scrollbar-inner">
</div>
</div>
</div>
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;
}
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 voici le CSS:
#maincontainer
{
background: grey;
width: 101%;
height: 101%;
overflow: auto;
position: fixed;
}
#child
{
background: white;
height:500px;
}
Il m'est arrivé d'essayer les solutions ci-dessus dans mon projet et pour une raison quelconque, je n'ai pas pu masquer la barre de défilement à cause du positionnement de div. Par conséquent, j'ai décidé de masquer la barre de défilement en introduisant une div qui la recouvre superficiellement. L'exemple ci-dessous concerne une barre de défilement horizontale:
<div id="container">
<div id="content">
My content that could overflow horizontally
</div>
<div id="scroll-cover">
</div>
</div>
CSS correspondant est la suivante:
#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 bidon consiste à faire overflow-y: hidden puis à faire défiler manuellement l’élément avec quelque chose comme:
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 existe un excellent article sur la façon de détecter et de traiter les événements onmousewheel dans le blog de de deepmikoto . Cela pourrait fonctionner pour vous, mais ce n’est définitivement pas une solution élégante.
Je voulais simplement partager un extrait combiné pour masquer la barre de défilement que j'utilise lors du développement. C'est une collection de plusieurs extraits trouvés sur Internet qui fonctionne pour moi:
.container {
overflow-x: scroll; /* for horiz. scroll, otherwise overflow-y: scroll; */
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
Espérant que ceci puisse t'être utile :*
n 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ébordement masqué sur le conteneur parent et débordement auto sur le conteneur enfant. Facile.
Il suffit de définir la largeur de la largeur de l'enfant à 100%, le rembourrage à 15px, overflow-x pour 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 de IE8 et inférieur.
2019: les réponses ci-dessus fonctionnent.
la plupart du temps, vous n'avez pas besoin de définir un arrière-plan, mais il y a un problème qui fait que la hauteur de la barre de défilement est parfois incorrecte. cela vous pouvez résoudre comme spécifié ci-dessous
height:0px; /* fixes issue with extra space underneath scrollbar */
width: 0px;
J'ai eu ce problème, et c'est très simple à résoudre.
Obtenez deux conteneurs. L'intérieur sera votre conteneur à défilement et l'extérieur logera évidemment l'intérieur:
#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }
C'est super simple et devrait fonctionner avec n'importe quel navigateur.
Masquer les barres de défilement horizontale et verticale.
HTML
<div id="container1">
<div id="container2">
<pre>
Select from left and drag to right to scroll this very long sentence. This should not show scroll bar at bottom or on the side. Keep scrolling .......... ............ .......... ........... This Fiddle demonstrates that scrollbar can be hidden. ..... ..... ..... .....
</pre>
</div>
<div>
CSS
* {
margin:0;
}
#container1 {
height: 50px;
width: 100%;
overflow: hidden;
position: relative;
}
#container2 {
position: absolute;
top: 0px;
bottom: -15px;
left: 0px;
right: -15px;
overflow: auto;
}
vous pouvez utiliser le code ci-dessous masquer le défilement, mais tout en étant en mesure de faire défiler
.element::-webkit-scrollbar { width: 0 !important }