Masquer la barre de défilement, mais tout en étant capable de faire 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é ç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.

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 .

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

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;

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:

• Verticale
• Horizontal
• Les deux directions

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

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>

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.

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

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

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

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 .

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>

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.

Cela fonctionne pour moi:

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

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

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

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

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

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>

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

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

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

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/

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 
}

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

}    

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.

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

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.

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

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.