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


Je veux être capable de 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 masque la barre de défilement, mais je ne peux plus défiler.

Est-il possible de supprimer la barre de défilement tout en continuant à faire défiler toute la page? Avec juste CSS ou HTML, s'il vous plaît.


651
2018-05-21 13:11


origine


Réponses:


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 gérer avec JavaScript. Si tu fais Element.offsetWidth - Element.clientWidth, la largeur exacte de la barre de défilement s'affichera.

Fiddle de travail JavaScript

ou

En 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

Fiddle de travail JavaScript

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.


518
2018-05-21 13:37



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

210
2018-06-06 09:10



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 le -moz-scrollbars-none la propriété est obsolète ( lien ).


90
2017-08-17 11:03



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

c'est un truc pour chevaucher quelque peu la barre de défilement avec un div qui se chevauchent qui n'a pas de barre de défilement

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

c'est seulement pour les navigateurs webkit. ou vous pouvez utiliser css spécifique au navigateur (s'il y en a dans le futur) chaque navigateur pourrait 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; comme par 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


59
2018-05-21 13:22



Ce Répondre ne comprend pas le code, alors voici 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 pour tous les navigateurs, et peut être vu ici.

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

C'est aussi un zoom sécurisé. Les solutions de remplissage / largeur affichent la barre de défilement lorsque le zoom est réduit 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;
}
<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>


29
2017-11-21 13:33



Voici une autre façon 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.

Cet exemple illustre le masquage des barres de défilement verticales, mais il peut facilement être adapté pour les barres de défilement horizontales. Il utilise une marge négative pour déplacer la barre de défilement hors du parent, puis la même quantité de remplissage pour repousser le contenu à sa position d'origine.

Verticale JsFiddle Demo.

Horizontal JsFiddle Demo.

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

18
2018-03-14 12:57



Utilisez juste 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 arrive.


13
2017-10-22 04:20



#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>

6
2018-04-18 17:46



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éfilement dans Chrome comme je l'ai testé dans Chrome. Je ne suis pas sûr des autres navigateurs.


5
2017-08-03 14:49



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

Vérifie ça ici (testé dans IE et FF).


5
2017-12-03 07:14



Ajout de rembourrage à 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.

Qu'est-ce que le travail dans les deux cas augmente la largeur de l'intérieur div à 100% plus la largeur de la barre de défilement (en supposant overflow: hidden sur la div extérieure).

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 + ')';

3
2018-04-13 22:12