Ocultar a barra de rolagem enquanto mantém a capacidade de rolagem

Apesar de desativar a barra de rolagem usando overflow: hidden, a funcionalidade de rolagem foi perdida. Para resolver esse problema, existe uma solução alternativa que combina um wrapper CSS com cálculos JavaScript.

Solução JavaScript e CSS

Utilize o seguinte código CSS e JavaScript:

#wrapper {
  overflow: hidden;
}

// Calculate the width of the element excluding the scrollbar
var elementWidth = document.getElementById("element").scrollWidth;

// Set the wrapper width to match the element width
document.getElementById("wrapper").style.width = elementWidth   "px";

Ocultando a barra de rolagem com CSS e ajustando a largura do wrapper para corresponder à largura real do conteúdo, você pode manter a funcionalidade de rolagem por meio do mouse ou teclado.

Técnica adicional

Para criar um div rolável sem uma barra de rolagem visível, use o mesmo princípio. Basta adicionar overflow-y: scroll; propriedade para o elemento interno.