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


1129

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é ça en CSS:

overflow: hidden;

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

Existe-t-il un moyen de supprimer la barre de défilement tout en pouvant faire défiler la page entière?

Avec juste CSS ou HTML, s'il vous plaît.

Réponses:


788

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 */
}

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 le faites Element.offsetWidth - Element.clientWidth, la largeur exacte de la barre de défilement s'affichera.

Violon de travail JavaScript

Ou

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

Violon de travail

Violon de travail JavaScript

Information:

Sur la base de cette réponse, j'ai créé un plugin de défilement simple .


16
Dans votre dernier "violon de travail", j'en ai vu trop !importantdonc je les ai tous supprimés
Roko C. Buljan

2
Cette solution ne fonctionne pas lorsque la largeur du contenu est définie sur auto. lors du défilement vers la droite, une partie du contenu n'est toujours pas visible. Pourquoi donc? Des solutions? Consultez le problème ici: jsfiddle.net/50fam5g9/7 Remarque: la largeur du contenu ne peut pas être connue à l'avance dans mon cas, c'est pourquoi il doit être réglé sur auto.
Sprout Coder

35
Cette approche ne couvrira pas tous les navigateurs et sera très spécifique à la version du navigateur avec laquelle vous travaillez pendant le développement.
Itsik Avidan

2
Et les barres de défilement horizontales? Comment pouvez-vous les cacher?
www139

11
Pourquoi compliquer et calculer la largeur de la barre de défilement? Il suffit de définir box-sizing: border-box; width: calc(100% + 50px);et la même valeur pour le rembourrage. Aucun navigateur n'a une largeur / hauteur de barre de défilement de 50 pixels, il devrait donc simplement les couvrir tous ...
Robert Koritnik

362

C'est facile dans WebKit, avec un style en option:

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

1
essayé cela dans l' cordovaapplication, a bien fonctionné. devait s'appliquer overflow:scrollà l'élément.
Kishor Pawar

41
Ne fonctionne pas sur Firefox, tout à fait évident car il s'agit uniquement d'un webkit. Merci :)
Zohair

3
fonctionne parfaitement dans les applications Electron comme prévu car elles sont en chrome. +1 remerciements: D
rococo

Depuis iOS8, cela ne fonctionne pas lorsqu'il est utilisé avec-webkit-overflow-scrolling: touch
aleclarson

4
cela fonctionne avec du chrome. mais ne fonctionne pas avec Mozilla Firefox.
romal tandel

299

Cela fonctionne pour moi avec des propriétés CSS simples:

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

Pour les anciennes versions de Firefox, utilisez: overflow: -moz-scrollbars-none;


13
Pour moi, overflow: -moz-scrollbars-nonecache les barres de défilement dans Firebox mais désactive également le défilement. Pouvez-vous fournir une démonstration où cela fonctionne pour vous?
chipit24

1
Malheureusement, la -moz-scrollbars-nonepropriété est supprimée pour les dernières versions de Firefox: developer.mozilla.org/en-US/docs/Web/CSS/overflow
Hristo Eftimov

2
Depuis iOS8, cela ne fonctionne pas lorsqu'il est utilisé avec-webkit-overflow-scrolling: touch
aleclarson

3
Pour Firefox obsolète, -moz-scrollbars-nonevous pouvez utiliser @-moz-document url-prefix() { .container { overflow: hidden; } }. Voir stackoverflow.com/questions/952861/… .
Martin Ždila

1
J'ai mis à jour ma réponse avec le dernier support pour Firefox :)
Hristo Eftimov

292

MISE À JOUR:

Firefox prend désormais en charge le masquage des barres de défilement avec CSS, de sorte que tous les principaux navigateurs sont désormais couverts (Chrome, Firefox, Internet Explorer, Safari, etc.).

Appliquez simplement le CSS suivant à l'élément dont vous souhaitez supprimer les barres de défilement:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

C'est la solution de navigateur croisé la moins hacky que je connaisse actuellement. Découvrez la démo.


RÉPONSE ORIGINALE:

Voici une autre façon qui n'a pas encore été mentionnée. C'est vraiment simple et n'implique que 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 définir explicitement la largeur du conteneur, ce qui le rend 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 remplissage pour ramener le contenu à sa position d'origine. La technique fonctionne pour le 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;
}

39
Je sais que c'est une nouvelle réponse à une vieille question, mais cela devrait être la réponse acceptée maintenant. Bon truc mec.
Vector

3
C'est absolument la meilleure réponse, haut la main. Maintenant, comment peut-on le modifier pour cacher les barres de défilement horizontales?
CeeMoney

1
@CeeMoney J'ai ajouté une démo horizontale. Pour les éléments de contenu à largeur fixe comme les images, cela devrait fonctionner, mais pour le texte, vous devez désactiver l'habillage.
Richrd

1
@Richrd - merci beaucoup pour la démo - fonctionne parfaitement. Je ne sais pas pourquoi nous rendons tout cela si difficile, mais c'est si simple que je me sens stupide de ne pas l'avoir fait avant.
CeeMoney

4
Merci @Richrd! Je suis tellement content d'avoir fait défiler jusqu'à votre réponse. Si SO avait une "réponse acceptée de force", je l'emploierais certainement maintenant.
Martin D

78

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 pas de barres de défilement:

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

C'est uniquement pour les navigateurs WebKit ... 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 ses barres respectives.

Pour utiliser Microsoft bord: -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


ictacademie.info/oussamaelbachiri ce site @Oussama Dobby utilise media = 'screen' puis la propriété ':: - webkit-scrollbar' pour css
Arpit Singh

Et quelles sont les propriétés CSS spécifiques?
Oussama el Bachiri

soit une disposition hacky ou jquery est une alternative
Arpit Singh

Votre première solution me donne ce problème s24.postimg.org/idul8zx9w/Naamloos.jpg Et qu'entendez-vous par mise en page hacky @ArpitSingh
Oussama el Bachiri

4
Ce qui suit m'a permis d'activer le défilement natif dans Cordova avec jQuery Mobile 1.4 sur iOS7 et iOS8 // CSS ::-webkit-scrollbar { display: none; } .ui-content { -webkit-overflow-scrolling: touch; } // jQuery Mobile onMobileInit () $.mobile.touchOverflowEnabled = true;
Ryan Williams

33

Cette réponse n'inclut pas le code, voici donc 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 également 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.

C'est également un zoom sûr. Les solutions de rembourrage / largeur affichent la barre de défilement lors d'un zoom au minimum.

Correction de 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>


Cela ne fonctionnera pas pour tous les navigateurs ... Uniquement les navigateurs webkit. Vous utilisez un sélecteur spécifique ::-webkit-scrollbar {}
Prefix

Je l'ai testé dans tous les nouveaux navigateurs avant de répondre à la question. Aussi FF. Il est arrivé quelques changements dans FF?
Timo Kähkönen

J'ai mis à jour la réponse. Il semble que l'ajout le padding-right: 150px;corrige. Testé dans FF, Chrome, Safari et Edge. Fonctionne également dans les bas niveaux de zoom en raison du grand rembourrage droit.
Timo Kähkönen

2
Prise en charge de Edge, IE 11, IE10 (peut-être plus bas également) html { -ms-overflow-style: none;}. Dans ces navigateurs, il n'est pas nécessaire d'utiliser le padding-hack.
Timo Kähkönen

J'ai dû utiliser la réponse de @ Timo et overflow-y: scrollobtenir un comportement de défilement mais caché (tout comme Chrome) pour le faire fonctionner sur Edge23.
jojo

21

Utilisez simplement 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ù le défilement arrive.


Montrez-moi votre problème au violon
Innodel

1
Facile et utile, merci! J'ai utilisé {display: none} au lieu de {width: 0;} et je travaille également
Santi Nunez

2
Ne fonctionne pas sur MS Edge ou Firefox.
Dpedrinha

18

Cela fonctionne pour moi sur plusieurs navigateurs. Cependant, cela ne masque pas les barres de défilement natives sur les navigateurs mobiles.

Dans SCSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

En CSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

Que {}signifient les blocs imbriqués ( )? Comment faut-il l'interpréter? Et le &? Peut-être élaborer dans votre réponse?
Peter Mortensen

C'est une chose SASS (apparemment, MOINS aussi): css-tricks.com/the-sass-ampersand
vipatron

@PeterMortensen Je viens de voir votre commentaire maintenant, &::-webkit-scrollbardevient .hide-native-scrollbar::-webkit-scrollbar { }en CSS
Murhaf Sousli

faites juste { width: 0; height: 0;}pour :: - webkit-scrollbar au lieu de display: nonepour iOS.
adriendenat

Dans FF71, cela bloque tout défilement.
gène b.

11

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

notez que scrollbar-width(FF uniquement) est marqué comme "expérimental"
cimak

Oui @cimak, mais sur FF, vous pouvez le masquer sans aucun problème, il n'est donc vraiment utilisé que pour Chrome.
Meloman

9

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 le CSS en conséquence.

Vérifiez-le ici (testé dans Internet Explorer et Firefox).


8

Depuis le 11 décembre 2018 (Firefox 64 et supérieur), la réponse à cette question est en effet très simple car Firefox 64+ implémente désormais la spécification CSS Scrollbar Styling .

Utilisez simplement le CSS suivant:

scrollbar-width: none;

Lien vers la note de publication de Firefox 64 ici .


3
C'est très agréable à savoir! Il semble que les navigateurs progressent effectivement, haha!
Oussama el Bachiri

7

Utilisation:

CSS

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

HTML

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>

Je ne sais pas pourquoi cela a été voté, mais je l'ai juste voté car il va dans la bonne direction, les autres solutions n'ont pas vraiment bien fonctionné dans mon cas. overflow-x: caché; + overflow-y: défilement; c'est ce qui a fait l'affaire, avec la largeur> 100% (110% dans mon cas a bien fonctionné).
dAngelov

1
c'est la même chose que la sollution la plus votée: essayer de cacher la barre de défilement. ce n'est pas idéal car cela varie avec le navigateur
mwm

6

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 tout point que vous souhaitez charger, décharger ou recharger les barres de défilement. Il est toujours défilable dans Chrome comme je l'ai testé dans Chrome, mais je ne suis pas sûr des autres navigateurs.


6

Cela fonctionne pour moi:

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}

5

Sur les navigateurs modernes, vous pouvez utiliser wheel event:

// Content is the element you want to apply the wheel scroll effect to
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;
});

C'est la réponse que je cherchais. Merci. J'ai utilisé overflow: hiddenet ce code, pour que mat-card-content(en angulaire 5, bien sûr) puisse défiler et cela a résolu mon problème. Remarque: je l'ai utilisé e.deltaYcomme mon stepet cela fonctionnait comme un défilement normal, donc je pense que pour un défilement normal mais avec une barre de défilement cachée, c'est la meilleure correspondance.
imans77

1
la page liée ici prévient que cette approche n'est pas appropriée?
jnnnnn

5

Mon problème: je ne veux aucun style dans mon contenu HTML. Je veux que mon corps défile directement sans barre de défilement, et seulement un défilement vertical, en travaillant avec des grilles CSS pour toutes les tailles d'écran.

Les solutions de remplissage ou de marge d'impact de valeur de dimensionnement de boîte , elles fonctionnent avec la taille de boîte: boîte de contenu .

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-transformet -moz-padding-start, pour avoir un impact uniquement sur Firefox, mais il y avait des effets secondaires réactifs qui nécessitaient trop de travail.

Cette solution fonctionne pour le contenu du corps 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;  /* Internet Explorer 10+ */
  overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}

/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Might be enough */
  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

Ajouter un remplissage à un intérieur div, 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, c'est d'augmenter la largeur de l'intérieur divà 100% plus la largeur de la barre de défilement (en supposant que overflow: hiddenle div extérieur).

Par exemple, en CSS:

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

En JavaScript, multi-navigateur:

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

4

C'est ainsi que je le fais pour le défilement horizontal; uniquement CSS et fonctionne bien avec des frameworks comme Bootstrap / col- *. Il n'a besoin que de deux divs supplémentaires et du parent avec un widthou un max-widthensemble:

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>


Merci, j'ai essayé, ça marche très bien. Une chose est qu'il vaut mieux changer margin-bottompour être padding-bottommais avec la même valeur. Cela ne mangera pas en dessous de l'espace pour l'élément en bas. Il empêche le chevauchement.
haxpor

@haxpor Le margin-bottomest négatif, je pense qu'il ne peut pas être changé en un padding-bottom, qui ne peut pas gérer les valeurs négatives
Jean

4

Le style SASS suivant devrait rendre votre barre de défilement transparente sur la plupart des navigateurs (Firefox n'est pas pris en charge):

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

3

Il se trouve que j'essaie 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 div. Par conséquent, j'ai décidé de masquer la barre de défilement en introduisant un 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">
     &nbsp; 
  </div>
</div>

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*/
}

3

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

3

Il s'agit d'une solution divite-esque qui devrait néanmoins 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 400 pixels):

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

3

le perfect-scrollbar plugin semble être le chemin à parcourir, voir: https://github.com/noraesae/perfect-scrollbar

Il s'agit d'une solution JavaScript bien documentée et complète pour le problème des barres de défilement.

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


2
Je ne vois pas comment cela se rapporte à la question?
Chris Nevill

3
Regarde la barre de défilement parfaite pendant 2 minutes sans révélation immédiate de la façon de l'utiliser pour masquer la barre de défilement . Si vous étendez votre réponse sur ce sujet, je suis sûr que vous obtiendrez plus de votes positifs.
Christiaan Westerbeek

3

Vous pouvez utiliser le code ci-dessous pour masquer la barre de défilement, mais tout en étant en mesure de faire défiler:

.element::-webkit-scrollbar { 
    width: 0 !important 
}

3

Pour masquer les barres de défilement des éléments dont le contenu déborde, utilisez.

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */

}    

Le support est pratiquement inexistant à l'exception de FF comme vous l'avez mentionné avec est trop peu pour ce que l'OP a demandé. Vérifiez caniuse.com/#feat=mdn-css_properties_scrollbar-width
Adrien

@Adrien Eh bien, la question d'origine indiquait qu'ils avaient une solution pour d'autres navigateurs. (Mais Mozilla Firefox et Internet Explorer ne semblent pas fonctionner comme ça) dit-il, c'est la raison pour laquelle j'ai donné la solution Firefox.
Alvin Moyo

J'ai trouvé que cela fonctionnait bien lorsqu'il était combiné avec l'équivalent: div :: - webkit-scrollbar {display: none; } pour Webkit / Chrome.
Sean Halls

2

Une autre sorte d'approche hacky consiste à faire 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 onmousewheelévénements dans le blog de deepmikoto . Cela pourrait fonctionner pour vous, mais ce n'est définitivement pas une solution élégante.


2

Je voulais juste partager un extrait combiné pour masquer la barre de défilement que j'utilise lors du développement. Il s'agit d'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 */
}

1

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ébordement masqué sur le conteneur parent et débordement automatique sur le conteneur enfant. Facile.


Cela ne masque pas la barre de défilement, elle la pousse simplement hors de vue avec la valeur "gauche".
robertmiles3

@ robertmiles3 n'est-ce pas la même chose? se cacher et ne pas pouvoir voir?
Bryan Willis

1
@ robertmiles3 la réponse sélectionnée ci-dessus fait la même chose depuis la droite. Il semble que toutes les solutions soient hacky jusqu'à ce que FIrefox décide d'autoriser CSS à masquer à nouveau les barres de défilement. blogs.msdn.com/b/kurlak/archive/2013/11/03/…
geoyws

Je suis d'accord. Il s'agit d'une solution similaire proposée par la réponse acceptée. Si ça marche ça marche. a voté
JSON

1

Cette solution délicate fonctionne même sur l'ancien navigateur Web IE

C'est une solution de contournement à la [ barre de défilement verticale ]

<html>
<head>
<style>
html,body{
         overflow:-moz-scrollbars-vertical;
         overflow-x:hidden;
         overflow-y:hidden;
         height:100%;
         margin:0 0 0 0
         }
</style>
</head>
<body id=body
      style="overflow:auto;
             height:100%" 
      onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
//your stuff here
</body> 
</html>

Essayez-le: jsfiddle


0

Réglez simplement la largeur de la largeur de l'enfant à 100%, le rembourrage à 15 pixels, overflow-xpour faire défiler et overflow:hiddenpour le parent et quelle que soit la largeur que vous souhaitez.

Il fonctionne parfaitement sur tous les principaux navigateurs, y compris Internet Explorer et Edge, à l'exception d'Internet Explorer 8 et des versions antérieures.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.