ATUALIZAR:
O Firefox agora suporta ocultar barras de rolagem com CSS, para que todos os principais navegadores estejam cobertos (Chrome, Firefox, Internet Explorer, Safari etc.).
Basta aplicar o seguinte CSS ao elemento do qual você deseja remover as barras de rolagem:
.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
Esta é a solução menos hacker entre navegadores que eu conheço atualmente. Confira a demonstração.
RESPOSTA ORIGINAL:
Aqui está outra maneira que ainda não foi mencionada. É realmente simples e envolve apenas duas divs e CSS. Nenhum JavaScript ou CSS proprietário é necessário e funciona em todos os navegadores. Também não é necessário definir explicitamente a largura do contêiner, tornando-o fluido.
Esse método usa uma margem negativa para mover a barra de rolagem para fora do pai e, em seguida, a mesma quantidade de preenchimento para empurrar o conteúdo de volta à sua posição original. A técnica funciona para rolagem vertical, horizontal e bidirecional.
Demonstrações:
Código de exemplo para a versão 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;
}
!important
então removi