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

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

[Fiddle de trabajo][1]

JavaScript:

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

[JavaScript Working Fiddle][2]

Or

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

[Working Fiddle][3]

[JavaScript Working Fiddle][4]

Información:

Basado en esta respuesta, he creado un plugin de desplazamiento simple.

Utilizar:

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

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

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

Esto es sólo para los navegadores WebKit... O podrías utilizar contenido CSS específico para cada navegador (si lo hay en el futuro). Cada navegador podría tener una propiedad diferente y específica para sus respectivas barras.

Para Microsoft Edge utilice: -ms-overflow-style: -ms-autohiding-scrollbar; o -ms-overflow-style: none; como por MSDN.

No existe un equivalente para Firefox. Aunque existe un plugin de jQuery para conseguirlo, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Añadir

    overflow: -moz-scrollbars-none;

me ha funcionado.