¿Cómo ocultar la barra de desplazamiento en Firefox?

Acabo de descubrir cómo ocultar la barra de desplazamiento en Google Chrome, lo hice con este código:

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

El único problema es que esto no funciona en Firefox. Intenté muchas formas de hacerlo, pero aún así no funciona.

Puedes usar la scrollbar-widthregla. Puede scrollbar-width: none;ocultar la barra de desplazamiento en Firefox y aún poder desplazarse libremente.

body {
   scrollbar-width: none;
}

Para ocultar la barra de desplazamiento en Chrome, Firefox e IE, puede usar esto:

.hide-scrollbar
{
    overflow: auto;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
}

Pude ocultar la barra de desplazamiento pero aún puedo desplazarme con la rueda del mouse con esta solución:

html {overflow: -moz-scrollbars-none;}

Descarga el complemento https://github.com/brandonaaron/jquery-mousewheel e incluye esta función:

jQuery('html,body').bind('mousewheel', function(event) {
    event.preventDefault();
    var scrollTop = this.scrollTop;
    this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
    //console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
  });

Esto es lo que necesitaba para deshabilitar las barras de desplazamiento mientras conservaba el desplazamiento en Firefox, Chrome y Edge en:

          @-moz-document url-prefix() { /* Disable scrollbar Firefox */
            html{
              scrollbar-width: none;
            }
          }
          body {
            margin: 0; /* remove default margin */
            scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
            -ms-overflow-style: none;  /* Disable scrollbar IE 10+ */
            overflow-y: scroll;
          }
          body::-webkit-scrollbar {
            width: 0px;
            background: transparent; /* Disable scrollbar Chrome/Safari/Webkit */
          }

Para webkit use lo siguiente:

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

Para Mozilla Firefox, use el siguiente código:

@-moz-document url-prefix() {
    html,body{overflow: hidden !important;}
}

y si el desplazamiento no funciona, agregue

element {overflow-y: scroll;}

al elemento específico

Esta es una solución genérica:

<div class="outer">
 <div class="inner">
    Some content...
 </div>
</div>

<style>
 .outer {
 overflow: hidden;
}
 .inner {
 margin-right: -16px;
 overflow-y: scroll;
 overflow-x: hidden;
}
</style>

La barra de desplazamiento está oculta por el div padre.

Esto requiere que use overflow: hidden en el div principal.

Para la versión más reciente de Firefox, las soluciones antiguas ya no funcionan, pero utilicé con éxito en v66.0.3 la scrollbar-colorpropiedad que puede configurar transparent transparenty que hará que la barra de desplazamiento en Firefox en el escritorio sea al menos invisible (todavía tiene lugar en la ventana gráfica y el móvil no funcionan, pero allí la barra de desplazamiento es una línea fina que se coloca sobre el contenido a la derecha).

overflow-y: auto; //or hidden if you don't want horizontal scrolling
overflow-y: auto;
scrollbar-color: transparent transparent;

Usé esto y funcionó. https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

html {
scrollbar-width: none;
}

Nota: Los agentes de usuario deben aplicar cualquier valor de ancho de barra de desplazamiento establecido en el elemento raíz a la ventana gráfica.

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

No funcionará en Firefox, ya que Firefox abandonó el soporte para barras de desplazamiento ocultas con funcionalidad (puede usar overflow: -moz-scrollbars-none;en versiones antiguas).

Intente usar esto:

overflow-y: -moz-hidden-unscrollable;

En algunos casos particulares (el elemento está en el extremo derecho de la pantalla o su desbordamiento principal está oculto), esta puede ser una solución:

@-moz-document url-prefix() {
  .element {
    margin-right: -15px;
  }
}

Intenté todo y lo que funcionó mejor para mi solución fue mostrar siempre la barra de desplazamiento vertical y luego agregar un margen negativo para ocultarla.

Esto funcionó para IE11, FF60.9 y Chrome 80

body {
  -ms-overflow-style: none; /** IE11 */
  overflow-y: scroll;
  overflow-x: hidden;
  margin-right: -20px;
}

Por si acaso, si alguien está buscando un truco para que de alguna manera la barra de desplazamiento sea invisible en Firefox (79.0).

Aquí hay una solución que funciona con éxito para Chrome, IE, Safari y hace que la barra de desplazamiento sea transparente en Firefox. Nada de lo anterior funcionó para firefox (79.0) al ocultar realmente la barra de desplazamiento.

Por favor, si alguien encuentra una manera de hacerlo sin cambiar el color, será de mucha ayuda. Por favor comente a continuación.

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

.scrollhost ::-moz-scrollbar {
  display: none;
 
}
 
.scrollhost {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-color: transparent transparent; /*just hides the scrollbar for firefox */
}

Lo hice funcionar para mí en ReactJS usando esto create-react-appal poner esto en mi App.css:

@-moz-document url-prefix() {
  html,
  body {
    scrollbar-width: none;
  }
}

Además, el bodyelemento tieneoverflow: auto