Ocultando a barra de rolagem em uma página HTML
Respostas:
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.
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.
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 .
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.)
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-colorMais 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 */ }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-noneEles recomendam o uso de estouro: oculto no lugar disso.-moz-scrollbars-horizontalSemelhante ao overflow-x-moz-scrollbars-verticalSemelhante 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.
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();
// TruncatedA 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
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.
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;
}height: inheritedno .viewportCSS.
100%é mais versátil e faz o trabalho.
-100pxe 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;
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.
-moz-scrollbars-none: "Esta é uma API obsoleta e não é mais garantida que funcione".
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:
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
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!
/* 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.
@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.
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;
}
}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;
}