Ocultando a barra de rolagem em uma página HTML

748

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

ANP
fonte
4
@UweKeim, não há nenhum truque para IE11
Dave

Respostas:

425

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.

jao
fonte
4
Não há opção "nenhuma" para a propriedade de estouro. As opções disponíveis incluem: visível, oculto, rolagem, auto, herança.
Sergiy Sokolenko 21/07
1273
Na verdade, essa não é a resposta correta: overflow: hidden não "oculta" a barra de rolagem. Ele também para de rolar o recurso na página. Não é exatamente isso que pedimos.
adriendenat
17
No Chrome, quando o estouro do corpo está definido como hiddenrolagem, ele funciona com uma roda de rolagem do mouse. No Firefox, a rolagem não funcionará com a roda do mouse, levei um tempo para descobrir isso.
Doug Molineux
13
Não vejo sentido em afirmar que overflow: hiddendesativa a rolagem. Se alguém quiser ocultar a barra de rolagem, presumivelmente, eles consideram o controle desnecessário porque não há conteúdo para rolar em primeiro lugar . Ou talvez eles simplesmente não desejem permitir a rolagem por completo .
BoltClock
39
Para mim, a afirmação é perfeitamente válida, pois a questão é ocultar a barra de rolagem , não desativar a rolagem .
sboisse
976

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:


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

Pedro
fonte
11
Exatamente o que estava procurando desde que eu realmente queria esconder as barras de rolagem, mas tem os elementos ainda rolagem (por exemplo, para cima / baixo teclas)
Mathias
7
esta deve ser a melhor resposta uma vez que outras soluções não permitem que você rolar
nuway
7
Isso suporta outros navegadores além do webkit? Porque não funciona no mozilla.
Rupam Datta
12
Há uma solicitação de recurso no rastreador Mozilla. Você pode ser capaz de acelerar a implementação por meio do voto para ele lá :)
Peter
3
ESSA É A RESPOSTA CORRETA! Como outros estão faltando. O problema não é apenas ocultar a barra de rolagem, mas como o excesso afeta outros estilos. Encontrei exatamente esse mesmo problema em nosso aplicativo. NÃO queremos transbordar automaticamente em 99% do aplicativo, no entanto, há uma seção de ajuda na qual você deseja que o usuário possa rolar para baixo. Como o corpo está cheio: oculto, a única tentativa de lidar com isso foi uma classe ng na raiz ou, graças a esse pessoal, usando apenas CSS.
precisa
524

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


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

Digite a descrição da imagem aqui

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

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.

Digite a descrição da imagem aqui


Lição de história

Barras de rolagem

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

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:

Exemplos

davidcondrey
fonte
27
Esta resposta se aplicaria a significativamente mais navegadores (ou seja, IE), em vez da resposta atualmente votada.
Matt Jensen
Ótima adição. Na verdade, implementou a mesma solução hoje! Vale ressaltar que o outro elemento deve estar excedente: oculto;
Matt Jensen
2
Esta é a resposta correta e completa. Explico que, se você simplesmente deseja interromper a rolagem de um usuário, pode usar a regra de estouro. Você também pode implementar seu próprio recurso de rolagem interno. Se isso não for suficiente, você poderá definir as propriedades da barra de rolagem diretamente, usando regras diferentes para diferentes navegadores.
Newshorts
1
Embora seja uma resposta incrivelmente bem pensada e muito detalhada e com muitos recursos vinculados, existem enormes problemas para os usuários de tecnologia assistiva quando você desativa a rolagem e usa o javascript para lidar com toda a rolagem. Se você também não definir o foco para um elemento toda vez que rolar para o usuário, seu usuário AT ficará completamente perdido. Além disso, seu usuário agora perdeu todo o controle ajustado sobre o que vê. UX muito ruim para assumir a rolagem para o usuário.
ShiningLight
O Firefox Quantum 63.0.1 no MacOS High Sierra, não oculta a barra de rolagem, mesmo com a regra 'overflow: -moz-scrollbars-none'. Alguém sabe a solução para isso? Todos os outros navegadores parecem funcionar com as soluções sugeridas.
Simona Adriani
106

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;
}
thgaskell
fonte
8
Essa deve ser a resposta aceita na versão imo. A única coisa que tive que adicionar foi height: inheritedno .viewportCSS.
Helzgate
4
O único problema com esta resposta é o espaço "morto" deixado pela barra de rolagem movida, porque na verdade não sabemos a largura da barra de rolagem, para subtraí-la do preenchimento.
Frondor
3
Além disso, você não precisa usar valores fixos para preenchimento e margens. 100%é mais versátil e faz o trabalho.
Frondor
Trabalhado no IE11, Operah e Chrome, ainda não testou o Firefox. Esta é uma ótima resposta, +1.
quase um iniciante
porque -100pxe 100px??
Oldboy
61

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;

Hristo Eftimov
fonte
2
Infelizmente, isso não funciona no FireFox 48.0.2 no macOS Sierra. Se você o fizer overflow: -moz-scrollbars-none;, removerá com êxito a barra de rolagem, mas também a capacidade de rolagem. Você pode também definir overflow: hiddencomo .container.
Martyn Chamberlin
1
Ah, e de developer.mozilla.org/en-US/docs/Web/CSS/overflow , lemos sobre -moz-scrollbars-none: "Esta é uma API obsoleta e não é mais garantida que funcione".
Martyn Chamberlin
1
Eu atualizei a minha resposta com o mais recente suporte para Firefox :)
Hristo Eftimov
56

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.

Wilf
fonte
3
resposta mais subestimada aqui
AGrush 4/19/19
Única solução que corrigiu meu pesadelo: D Obrigado!
boomdrak 22/01
21

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;}
Ben Yo
fonte
Funciona para mim no chrome e no firefox, não testei o IE ou qualquer outro navegador. jsfiddle.net/8xtfk729
Ben Davis
1
No chrome (pelo menos v54), isso desativa a rolagem por meio da roda de rolagem por algum motivo. Role pelas teclas de seta, home / end / pg para baixo / pg para cima, toque levemente no toque e clique com o mouse 3 e arraste ainda funciona.
House3272
Esta resposta é legítima, na verdade funciona e parece funcionar entre navegadores.
Sam
Que esconde todo o div do meu lado
Jonny
16

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

Alex
fonte
a resposta dele não funciona no Chrome e Safari no iOS 12.3
oldboy
11

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

Peter Örneholm
fonte
1
Esta é a resposta correta e deve ser a primeira. Tudo acima disso não responde à pergunta em questão. O OP não solicita a rolagem desativada, o zhe deseja ocultar a barra de rolagem.
pixelpax
11

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;
 }
JoshW
fonte
10

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;
}
Blake Plumb
fonte
1
uma explicação de como funciona este seria apreciada - jogo com visibilidade pai / filho para esconder a barra de rolagem é horrível
JackyJohnson
1
@believesInSanta Adicionei comentários e codifiquei para explicar melhor. Não concordo com sua avaliação de que brincar com visibilidade é uma maneira horrível de ocultar a barra de rolagem. Entendo que é um hack, mas a maneira correta de obter esse efeito seria se todos os navegadores suportassem uma maneira de estilizar a barra de rolagem separadamente, como o chrome e o safari permitem.
Blake Plumb
2
Eu apenas me apaixonei por sua solução. Funciona perfeitamente (usado em aplicativos projetados para serem usados ​​por navegadores modernos). Muito obrigado!
Maxime Lafarie
7

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.
Seth W. Klein
fonte
1
Nota não relacionada (no que diz respeito à pergunta). Nesse caso, você deve usar @extend versus @include. Então, em vez de @mixin{}, você faria %size{}nos seletores de css, chamar @extend %size;. Mixins são normalmente usados ​​quando você puxa variáveis ​​para retornar um resultado. Os marcadores de posição (aka @extend) destinam-se a códigos repetidos simples como este - onde nenhuma "função" é necessária.
precisa
1
Eu editei para usar @extend. O resultado é provavelmente menos compreensível para pessoas que não conhecem o SCSS, mas suficientemente bem.
Seth W. Klein
6

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

Brad Azevedo
fonte
3
Não me lembro exatamente porque isso aconteceu há alguns meses, mas acredito que definir o estouro do corpo estava funcionando no Chrome, mas não no Firefox (ou vice-versa). O uso da tag HTML funcionou em ambos.
Brad Azevedo
Da memória, isso pode ser uma diferença no modo peculiar.
thomasrutter
5

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

Marco Allori
fonte
5

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>
Huu Phong Nguyen
fonte
4

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%;
}
Timo
fonte
3

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

Saiba mais sobre isso: estouro .

Pranay Rana
fonte
3

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>
Rasel
fonte
2
O scrolljacking funciona, mas quase sempre é uma experiência ruim para o usuário.
precisa saber é o seguinte
1
Embora isso seja possível, com um bom exemplo, existem grandes problemas para os usuários de tecnologia assistiva quando você desativa a rolagem e usa o javascript para lidar com a rolagem. Se você também não definir o foco para um elemento toda vez que rolar para o usuário, seu usuário AT ficará completamente perdido. Além disso, todo usuário agora perdeu todo o controle ajustado sobre o que vê. UX muito ruim para assumir a rolagem para o usuário. Além da roda do mouse, você também precisa manipular teclas para cima / para baixo, rotores do leitor de tela, cliques do mouse e controles do touchpad. Isso se torna pesado para o desenvolvedor e péssimo para o usuário.
ShiningLight
2

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.

Stefan Mohr
fonte
1
Bom link. É bom saber como é o resultado em vários navegadores. Infelizmente, a figura para uma captura de tela dos resultados finais está quebrada
Chetabahana 3/15
-1

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;
}
John Carroll
fonte