Ocultar la barra de desplazamiento, pero sin dejar de poder desplazarse

Sólo una prueba que está funcionando 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 */
}

Violín de trabajo

JavaScript:

Dado que el ancho de la barra de desplazamiento difiere en diferentes navegadores, es mejor manejarlo con JavaScript. Si lo haces Element.offsetWidth - Element.clientWidth, se mostrará el ancho exacto de la barra de desplazamiento.

Violín de trabajo de JavaScript

Or

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

Violín de trabajo

Violín de trabajo de JavaScript

Información:

Basado en esta respuesta, creé un complemento de desplazamiento simple.

Esto me funciona con propiedades CSS simples:

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

Para versiones anteriores de Firefox, use: overflow: -moz-scrollbars-none;

Es fácil en WebKit, con estilo opcional:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

ACTUALIZACIÓN:

Firefox ahora admite ocultar las barras de desplazamiento con CSS, por lo que todos los principales navegadores ahora están cubiertos (Chrome, Firefox, Internet Explorer, Safari, etc.).

Simplemente aplique el siguiente CSS al elemento del que desea eliminar las barras de desplazamiento:

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

Esta es la solución de navegador cruzado menos hacky que conozco actualmente. Mira la demostración.

RESPUESTA ORIGINAL:

Aquí hay otra forma que aún no se ha mencionado. Es realmente simple y solo involucra dos divs y CSS. No se necesita JavaScript ni CSS propietario, y funciona en todos los navegadores. Tampoco requiere establecer explícitamente el ancho del contenedor, lo que lo hace fluido.

Este método usa un margen negativo para mover la barra de desplazamiento fuera del elemento principal y luego la misma cantidad de relleno para empujar el contenido a su posición original. La técnica funciona para desplazamiento vertical, horizontal y bidireccional.

Población:

• Vertical
• Horizontal
• Ambas direcciones

Código de ejemplo para la versión vertical:

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

Uso:

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

Este es un truco para superponer un poco la barra de desplazamiento con un div superpuesto que no tiene ninguna barra de desplazamiento:

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

Esto es solo para WebKit navegadores... O podría usar contenido CSS específico del navegador (si hay alguno en el futuro). Cada navegador podría tener una propiedad diferente y específica para sus respectivas barras.

Para el uso de Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar; or -ms-overflow-style: none; as por MSDN.

No hay equivalente para Firefox. Aunque hay un complemento jQuery para lograr esto, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Además, Desplazamiento sin barra de desplazamiento para todos los navegadores.

CO

.keep-scrolling {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll y axis*/
}

/* Hide scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.keep-scrolling {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

SCSS

.keep-scrolling {
      background-color: #eee;
      width: 200px;
      height: 100px;
      border: 1px dotted black;
      overflow-y: scroll; /* Add the ability to scroll y axis*/

     /* Hide scrollbar for IE, Edge and Firefox */
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */

      /* Hide scrollbar for Chrome, Safari and Opera */
      &::-webkit-scrollbar {
        display: none;
      }
    }
     

HTML

<div class="keep-scrolling">
</div>

Use esto para ocultar la barra de desplazamiento pero mantener la funcionalidad:

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

Ocultar barra de desplazamiento para IE, Edge y Firefox

.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Esta respuesta no incluye el código, así que aquí está la solución de página:

De acuerdo con la página, este enfoque no necesita saber el ancho de la barra de desplazamiento con anticipación para funcionar y la solución también funciona para todos los navegadores, y se puede ver aquí.

Lo bueno es que no está obligado a usar relleno o diferencias de ancho para ocultar la barra de desplazamiento.

Esto también es seguro para el zoom. Las soluciones de relleno/ancho muestran la barra de desplazamiento cuando se acerca al mínimo.

Corrección 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>

Simplemente use las siguientes tres líneas y su problema se resolverá:

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

Donde liaddshapes es el nombre del div de donde viene scroll.

Esto funciona para mí en varios navegadores. Sin embargo, esto no oculta las barras de desplazamiento nativas en los navegadores móviles.

In SCSS

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

In CO

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

Solo escribe este código:

::-webkit-scrollbar {
  width: 0px;
}

or

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

scrollbar-width: none; 

funciona para mi.

Lo siguiente me funcionó en Microsoft, Chrome y Mozilla para un elemento div específico:

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}

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

Todo lo que has escrito es correcto excepto "desbordamiento". webkit para Chrome y otros navegadores

overflow-y: scroll;

or

overflow-y: auto;

Para Firefox y borde

scrollbar-width: none;

or

scrollbar-width: thin;

A partir del 11 de diciembre de 2018 (Firefox 64 y superior), la respuesta a esta pregunta es muy simple, ya que Firefox 64+ ahora implementa el Especificaciones de estilo de la barra de desplazamiento CSS.

Solo usa el siguiente CSS:

scrollbar-width: none;

Enlace a la nota de lanzamiento de Firefox 64 aquí.

Para ocultar las barras de desplazamiento de los elementos con contenido desbordado, utilice.

.div{

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

}    

Esto funcionó para mí

div {
  -ms-overflow-style: none; /* Edge, Internet Explorer */
  scrollbar-width: none; /* Firefox */
  overflow-y: scroll;
}

// hides scrollbars while allowing to scroll
div::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

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

Aplicar CSS en consecuencia.

Compruébelo usted mismo aquí (probado en Internet Explorer y Firefox).

Uso:

CO

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

En los navegadores modernos puedes usar 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;
});

Utilice la herramienta

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
}

Llame a estas funciones para cualquier punto que desee cargar o descargar o recargar las barras de desplazamiento. Todavía se puede desplazar en Chrome como lo probé en Chrome, pero no estoy seguro de los otros navegadores.

Esto funciona para mi:

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

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

Así es como lo hago para el desplazamiento horizontal; solo CSS y funciona bien con marcos como Bootstrap / col-*. Solo necesita dos extra divs y el padre con un width or max-width conjunto:

Puede seleccionar el texto para que se desplace o desplazarlo con los dedos si tiene una pantalla táctil.

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

Versión corta para gente perezosa:

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

Mi problema: no quiero ningún estilo en mi contenido HTML. Quiero que mi cuerpo se pueda desplazar directamente sin ninguna barra de desplazamiento, y solo un desplazamiento vertical, trabajando con Cuadrículas CSS para cualquier tamaño de pantalla.

EL tamaño de caja valora el relleno de impacto o las soluciones de margen, trabajan con tamaño de la caja: caja de contenido.

Todavía necesito la directiva "-moz-scrollbars-none", y como gdoron y Mr_Green, tuve que ocultar la barra de desplazamiento. Lo intenté -moz-transform y -moz-padding-start, para afectar solo a Firefox, pero había efectos secundarios de respuesta que requerían demasiado trabajo.

Esta solución funciona para el contenido del cuerpo HTML con estilo "display: grid" y responde.

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

Las siguientes SASS el estilo debe hacer que la barra de desplazamiento sea transparente en la mayoría de los navegadores (Firefox no es compatible):

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

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

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

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

.your-overflow-scroll-class::-webkit-scrollbar {
  ...
  width: 0.5rem; //only hide the vertical scrollbar
  height: 0px; //only hide the horizontal scrollbar
}

Adición de relleno a un interior div, como en la respuesta actualmente aceptada, no funcionará si por alguna razón desea usar box-model: border-box.

Lo que funciona en ambos casos es aumentar el ancho del interior. div al 100% más el ancho de la barra de desplazamiento (asumiendo overflow: hidden en el div exterior).

Por ejemplo, en CSS:

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

En JavaScript, navegador cruzado:

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

Pruebo las soluciones anteriores en mi proyecto y, por alguna razón, no pude ocultar la barra de desplazamiento debido al posicionamiento de div. Por lo tanto, decidí ocultar la barra de desplazamiento introduciendo un div que la cubra superficialmente. El siguiente ejemplo es para una barra de desplazamiento horizontal:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

El CSS correspondiente es el siguiente:

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

Esto será en el cuerpo:

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

Y este es el CSS:

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}

#child
{
    background: white;
    height:500px;
}

Esta es una solución al estilo de Divitis que, sin embargo, debería funcionar para todos los navegadores...

El marcado es el siguiente y debe estar dentro de algo con posicionamiento relativo (y su ancho debe establecerse, por ejemplo, 400 píxeles):

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

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