CSS pode ser usado para ocultar a barra de rolagem? Como você faria isso?

Defina overflow: hidden;a etiqueta do corpo assim:

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

O código acima oculta a barra de rolagem horizontal e vertical.

Se você deseja ocultar apenas a barra de rolagem vertical , use overflow-y:

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

E se você deseja ocultar apenas a barra de rolagem horizontal , use overflow-x:

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

Nota: Isso também desativará o recurso de rolagem. Consulte as respostas abaixo se você quiser apenas ocultar a barra de rolagem, mas não o recurso de rolagem.

O WebKit suporta pseudo elementos da barra de rolagem que podem ser ocultados com regras CSS padrão:

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

Se você deseja ocultar todas as barras de rolagem, use

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

Não tenho certeza sobre a restauração - isso funcionou, mas pode haver uma maneira correta de fazer isso:

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

É claro que você sempre pode usar width: 0, que pode ser facilmente restaurado width: auto, mas não sou fã de abusar widthde ajustes na visibilidade.

O Firefox 64 agora suporta a propriedade experimental da barra de rolagem por padrão (63 requer que um sinalizador de configuração seja definido). Para ocultar a barra de rolagem no Firefox 64:

#element {
    scrollbar-width: none;
}

Para ver se o seu navegador atual suporta o pseudo-elemento ou scrollbar-width, tente este trecho:

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(Observe que essa não é realmente uma resposta correta para a pergunta, porque também oculta as barras horizontais, mas era isso que eu estava procurando quando o Google me indicou aqui, então achei que a postaria de qualquer maneira.)

Sim, mais ou menos ..

Quando você faz a pergunta: "As barras de rolagem de um navegador podem ser removidas de alguma forma, em vez de simplesmente ocultas ou camufladas", todos dirão "Não é possível" porque não é possível remover as barras de rolagem de todos os navegadores em um navegador. de maneira compatível e compatível com outras versões, e há todo o argumento de usabilidade.

No entanto, é possível impedir que o navegador tenha a necessidade de gerar e exibir barras de rolagem se você não permitir que sua página da Web transborde.

Isso significa apenas que precisamos substituir proativamente o mesmo comportamento que o navegador normalmente faria por nós e agradecer ao navegador, mas não, obrigado. Em vez de tentar remover as barras de rolagem (o que todos sabemos que não é possível), podemos evitar a rolagem (perfeitamente viável) e a rolagem nos elementos que fabricamos e com mais controle.

Crie uma div com o estouro oculto. Detectar quando o usuário tenta rolar, mas não consegue, porque desabilitamos a capacidade dos navegadores de rolar com estouro: oculto .. e, em vez disso, movemos o conteúdo para cima usando JavaScript quando isso ocorre. Criando assim nossa própria rolagem sem a rolagem padrão do navegador ou use um plug-in como o iScroll .

---

Por uma questão de ser completo; todas as formas específicas de manipulação de barras de rolagem do fornecedor:

Internet Explorer 5.5 ou superior

* Essas propriedades nunca fizeram parte da especificação CSS, nem foram aprovadas ou prefixadas pelo fornecedor, mas funcionam no Internet Explorer e no Konqueror. Eles também podem ser definidos localmente na folha de estilos do usuário para cada aplicativo. No Internet Explorer, você o encontra na guia "Acessibilidade", no Konqueror, na guia "Folhas de estilo".

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

A partir do Internet Explorer 8, essas propriedades eram prefixadas pelo fornecedor pela Microsoft, mas ainda não eram aprovadas pelo W3C .

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

Mais detalhes sobre o Internet Explorer

O Internet Explorer scrolldisponibiliza que define se deve ou não desabilitar ou habilitar as barras de rolagem; também pode ser usado para obter o valor da posição das barras de rolagem.

Com o Microsoft Internet Explorer 6 e posterior, quando você usa a !DOCTYPEdeclaração para especificar o modo compatível com os padrões, esse atributo se aplica ao elemento HTML. Quando o modo compatível com os padrões não é especificado, como nas versões anteriores do Internet Explorer, esse atributo se aplica ao BODYelemento, NÃO ao HTMLelemento.

Também é importante notar que, ao trabalhar com .NET, a classe ScrollBar na System.Windows.Controls.Primitivesestrutura de apresentação é responsável por renderizar as barras de rolagem.

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx

• MSDN. Propriedades básicas da interface do usuário
• W3C. Sobre propriedades da barra de rolagem não padrão
• MSDN. Classe .NET ScrollBar

WebKit

As extensões do WebKit relacionadas à personalização da barra de rolagem são:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

Cada um deles pode ser combinado com pseudo-seletores adicionais:

• :horizontal - A pseudo-classe horizontal se aplica a qualquer peça da barra de rolagem que tenha uma orientação horizontal.
• :vertical - A pseudo-classe vertical se aplica a qualquer peça da barra de rolagem que tenha uma orientação vertical.
• :decrement- A pseudo-classe de decréscimo se aplica aos botões e faixas. Indica se o botão ou parte da trilha diminuirá ou não a posição da visualização quando usada (por exemplo, em uma barra de rolagem vertical, deixada em uma barra de rolagem horizontal).
• :increment- A pseudo-classe de incremento se aplica a botões e faixas. Indica se um botão ou parte da trilha aumentará ou não a posição da visualização quando usada (por exemplo, em uma barra de rolagem vertical, diretamente em uma barra de rolagem horizontal).
• :start- A pseudo-classe inicial se aplica a botões e faixas. Indica se o objeto é colocado antes do polegar.
• :end- A pseudo-classe final se aplica a botões e faixas. Indica se o objeto é colocado após o polegar.
• :double-button- A pseudo classe de botão duplo aplica-se a botões e peças de faixa. É usado para detectar se um botão faz parte de um par de botões que estão juntos na mesma extremidade de uma barra de rolagem. Para trechos de faixa, indica se a faixa se baseia em um par de botões.
• :single-button- A pseudo classe de botão único se aplica a botões e peças de faixa. É usado para detectar se um botão está sozinho no final de uma barra de rolagem. Para partes da faixa, indica se a parte da faixa se encaixa em um botão único.
• :no-button - Aplica-se às partes da trilha e indica se a parte da trilha corre ou não para a borda da barra de rolagem, ou seja, não há botão no final da trilha.
• :corner-present - Aplica-se a todas as peças da barra de rolagem e indica se um canto da barra de rolagem está ou não presente.
• :window-inactive- Aplica-se a todas as partes da barra de rolagem e indica se a janela que contém a barra de rolagem está ou não ativa no momento. (Em todas as noites, esta pseudo classe agora também se aplica a :: selection. Planejamos estendê-la para trabalhar com qualquer conteúdo e propô-la como uma nova pseudo classe.)

Exemplos dessas combinações

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

• Barras de rolagem de estilo - Webkit.org

Mais detalhes sobre o Chrome

addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler (manipulador Window.ScrollHandler)

  Adiciona um manipulador Window.ScrollEvent Parâmetros: manipulador - o manipulador Retorna: retorna o registro do manipulador [ origem ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )

Mozilla

O Mozilla possui algumas extensões para manipular as barras de rolagem, mas todas são recomendadas para não serem usadas.

• -moz-scrollbars-none Eles recomendam o uso de estouro: oculto no lugar disso.
• -moz-scrollbars-horizontal Semelhante ao overflow-x
• -moz-scrollbars-vertical Semelhante ao estouro-y

• -moz-hidden-unscrollableFunciona apenas internamente nas configurações de perfil de um usuário. Desativa a rolagem de elementos raiz XML e desativa o uso de teclas de seta e roda do mouse para rolar páginas da Web.

• Documentos do desenvolvedor Mozilla sobre 'Overflow'

Mais detalhes sobre o Mozilla

Até onde eu sei, isso não é realmente útil, mas vale a pena notar que o atributo que controla se as barras de rolagem são ou não exibidas no Firefox é ( link de referência ):

• Atributo:        barras de rolagem
• Tipo:               nsIDOMBarProp
• Descrição:   o objeto que controla se as barras de rolagem são ou não exibidas na janela. Este atributo é "substituível" em JavaScript. Somente leitura

Por último, mas não menos importante, o preenchimento é como mágica.

Como já foi mencionado em algumas outras respostas, aqui está uma ilustração que é suficientemente auto-explicativa.

Lição de história

Só porque estou curioso, queria aprender sobre a origem das barras de rolagem, e essas são as melhores referências que encontrei.

• 10 invenções sobre rolagem e barras de rolagem
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

Diversos

Em um rascunho de especificação HTML5, o seamlessatributo foi definido para impedir que barras de rolagem apareçam nos iFrames, para que possam ser combinadas com o conteúdo circundante em uma página . Embora esse elemento não apareça na revisão mais recente.

O scrollbarobjeto BarProp é filho do windowobjeto e representa o elemento da interface do usuário que contém um mecanismo de rolagem ou algum conceito de interface semelhante. window.scrollbars.visibleretornará truese as barras de rolagem estiverem visíveis.

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

A API do histórico também inclui recursos para restauração de rolagem na navegação da página para manter a posição de rolagem no carregamento da página.

window.history.scrollRestoration pode ser usado para verificar o status da restauração de rolagem ou alterar seu status (anexando ="auto"/"manual" . Automático é o valor padrão. Alterar para manual significa que você, como desenvolvedor, assumirá a propriedade de todas as alterações de rolagem que possam ser necessárias quando um usuário percorrer o histórico do aplicativo Se necessário, você pode acompanhar a posição de rolagem enquanto pressiona as entradas do histórico com history.pushState ().

---

Leitura adicional:

• Barra de rolagem na Wikipedia
• Barra de rolagem (Windows)
• O método de rolagem
• O método de rolagem - Microsoft Dev Network
• iScroll no Github (mencionado na primeira seção acima)
• Scrolling e Scrollbars, um artigo sobre usabilidade de Jakob Nielsen

Exemplos

• Painéis de rolagem independentes sem rolagem do corpo (usando apenas CSS) - Ben Frain (21-10-2014)

Você pode fazer isso com um invólucro divque tem seu estouro oculto e o interno divdefinido como auto.

Para remover a divbarra de rolagem interna , você pode puxá-la para fora da divjanela de exibição externa aplicando uma margem negativa à interna div. Em seguida, aplique preenchimento igual à div interna para que o conteúdo fique visível.

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

Isso funciona para mim com propriedades simples de CSS:

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

Para versões mais antigas do Firefox, use: overflow: -moz-scrollbars-none;

Aqui está minha solução, que teoricamente abrange todos os navegadores modernos:

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html pode ser substituído por qualquer elemento que você deseja ocultar na barra de rolagem.

_{Nota : Examinei as outras 19 respostas para ver se o código que estou postando já foi coberto e parece que nenhuma resposta resume a situação como está em 2019, embora muitas entrem em excelentes detalhes. Desculpas se isso foi dito por outra pessoa e eu perdi.}

Acho que encontrei uma solução alternativa para vocês, se ainda estiverem interessados. Esta é minha primeira semana, mas funcionou para mim ...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

Se você está procurando uma solução para ocultar uma barra de rolagem para dispositivos móveis, siga a resposta de Peter !

Aqui está um jsfiddle , que usa a solução abaixo para ocultar uma barra de rolagem horizontal.

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Foi testado em um tablet Samsung com Android 4.0.4 (Ice Cream Sandwich, tanto no navegador nativo quanto no Chrome) e em um iPad com iOS 6 (tanto no Safari quanto no Chrome).

Use a overflowpropriedade CSS :

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

Aqui estão mais alguns exemplos:

• testes de estouro-x, estouro-y
• A propriedade CSS Overflow

Como as outras pessoas já disseram, use CSS overflow.

Mas se você ainda deseja que o usuário possa rolar esse conteúdo (sem a barra de rolagem visível), use o JavaScript.

Veja aqui a minha resposta para uma solução: Esconda a barra de rolagem enquanto continua a rolar com o mouse / teclado

Além da resposta de Pedro:

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

Isso funcionará da mesma maneira para o Internet Explorer 10:

 #element {
      -ms-overflow-style: none;
 }

Abordagem entre navegadores para ocultar a barra de rolagem.

Foi testado no Edge, Chrome, Firefox e Safari

Esconda a barra de rolagem enquanto continua a rolar com a roda do mouse!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

Se você deseja que a rolagem funcione, antes de ocultar as barras de rolagem, considere estilizá-las. As versões modernas do OS X e do SO móvel possuem barras de rolagem que, embora não sejam práticas para serem agarradas com um mouse, são bastante bonitas e neutras.

Para ocultar barras de rolagem, uma técnica de John Kurlak funciona bem, exceto para deixar os usuários do Firefox que não possuem touchpads sem maneira de rolar, a menos que tenham um mouse com uma roda, o que provavelmente fazem, mas mesmo assim eles geralmente podem rolar verticalmente .

A técnica de John usa três elementos:

• Um elemento externo para mascarar as barras de rolagem.
• Um elemento do meio para ter as barras de rolagem.
• E um elemento de conteúdo para definir o tamanho do elemento do meio e torná-lo com barras de rolagem.

Deve ser possível definir o mesmo tamanho dos elementos externos e de conteúdo, o que elimina o uso de porcentagens, mas não consigo pensar em outra coisa que não funcione com os ajustes certos.

Minha maior preocupação é se todas as versões dos navegadores configuram barras de rolagem para tornar visível o conteúdo excedido. Eu testei nos navegadores atuais, mas não nos mais antigos.

Perdoe meu SASS ; P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

Teste

OS X é 10.6.8. Windows é Windows 7.

• Barras de rolagem do Firefox 32.0 ocultas. As teclas de seta não rolam, mesmo depois de clicar para focar, mas a roda do mouse e dois dedos no trackpad o fazem. OS X e Windows.
• Barras de rolagem do Chrome 37.0 ocultas. As teclas de seta funcionam depois de clicar para focar. Roda do mouse e trackpad funcionam. OS X e Windows.
• Barras de rolagem do Internet Explorer 11 ocultas. As teclas de seta funcionam depois de clicar para focar. Roda do mouse funciona. Janelas.
• Safari 5.1.10 Barras de rolagem ocultas. As teclas de seta funcionam depois de clicar para focar. Roda do mouse e trackpad funcionam. OS X.
• Android 4.4.4 e 4.1.2. Barras de rolagem ocultas. A rolagem por toque funciona. Tentei no Chrome 37.0, Firefox 32.0 e HTMLViewer na 4.4.4 (o que quer que seja). No HTMLViewer, a página é do tamanho do conteúdo mascarado e também pode ser rolada! A rolagem interage de maneira aceitável com o zoom da página.

Eu apenas pensei em apontar para alguém mais lendo esta pergunta que a configuração overflow: hidden(ou estouro-y) no bodyelemento não ocultou as barras de rolagem para mim.

Eu tive que usar o htmlelemento

Eu escrevi uma versão do WebKit com algumas opções como ocultação automática , pequena versão , role apenas y ou apenas x :

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

Copie este código CSS no código do cliente para ocultar a barra de rolagem:

<style>

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

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

</style>

Meu HTML é assim:

<div class="container">
  <div class="content">
  </div>
</div>

Adicione isso ao seu divlocal em que deseja ocultar a barra de rolagem:

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

E adicione isso ao container

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

Para desativar a barra de rolagem vertical, basta adicionar overflow-y:hidden;.

Saiba mais sobre isso: estouro .

Minha resposta vai rolar mesmo quando overflow:hidden;, usando jQuery:

Por exemplo, role horizontalmente com a roda do mouse:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

Eu acredito que você pode manipulá-lo com o overflowatributo CSS, mas eles têm suporte limitado ao navegador. Uma fonte disse que era o Internet Explorer 5 (e posterior), Firefox 1.5 (e posterior) e Safari 3 (e posterior) - talvez o suficiente para seus propósitos.

Rolagem, rolagem, rolagem tem uma boa discussão.

Tentei de tudo e o que funcionou melhor para minha solução foi sempre exibir a barra de rolagem vertical e adicionar uma margem negativa para ocultá-la.

body {
  overflow-y: scroll;
  margin-right: -20px;
}