Remova o CSS da barra de rolagem horizontal
Por que remover a barra de rolagem?
Embora não seja recomendado em web design para alterar o comportamento do navegador padrão, há momentos em que é necessário. Por exemplo, uma barra de rolagem que emerge quando os transbordamentos de conteúdo de um elemento pode ser difícil de perceber se ocupar uma pequena parte de uma página da web. Além disso, remover a barra de rolagem faz sentido porque, como web designer, você pode não pensar em rolar em uma página da web. Independentemente da justificativa para esconder. Além disso, depois de esconder a barra de rolagem, visualize o site para garantir que ele funcione como pretendido em dispositivos de mesa e móveis.
Remoção de barra de rolagem no CSS:
O conteúdo que excede os limites de seu contêiner pode ser tratado usando o atributo de transbordamento no CSS. Se o conteúdo de um elemento for maior que o espaço disponível, você poderá usar esta propriedade para prender, ocultar ou rolar o conteúdo. Os recursos para lidar com o excesso rolável na mídia visual estão incluídos neste módulo CSS. No CSS, o transbordamento ocorre quando o conteúdo de um contêiner passa por um ou mais das bordas do contêiner. Em essência, especifica o que ocorre quando o conteúdo de um elemento é grande demais para se encaixar no contexto do bloco.
A propriedade Over-Flow do CSS suporta os seguintes valores:
auto: Para adicionar uma barra de rolagem, mas só o fará se o conteúdo exceder a área rolável.
visível: Para permitir que o conteúdo seja exibido, mesmo quando ele transbordar.
rolagem: Para prender o conteúdo e ver o conteúdo restante, ele adicionará uma barra de rolagem.
escondido: Ele mostrará o conteúdo visível e o conteúdo restante será oculto.
grampo: Ele coloca o conteúdo de um elemento para sua caixa.
Podemos definir os valores da barra de rolagem com o Flow-X para controlar a barra de rolagem horizontal, o transbordamento-y para a barra de rolagem vertical e o transbordamento suportarão os dois.
Exemplo 01: escondendo a barra de rolagem horizontal no CSS
Vamos começar com o exemplo básico de remoção da barra de rolagem da página da web usando CSS. Infelizmente, não há uma regra CSS específica que possa ser usada para fazer a barra de rolagem desaparecer e, no entanto, permitir que os usuários role uma página ou elemento. Com o uso de algumas regras de CSS específico do navegador, isso ainda é factível. Aplique o seguinte CSS no corpo da página da web (para a página inteira) ou um único elemento para ocultar ou remover a barra de rolagem e manter a funcionalidade de rolagem.
Como visto acima, podemos usar maneiras diferentes para fazer as barras de rolagem desaparecerem em diferentes navegadores. No exemplo acima, o elemento é uma área ou seletor específico do qual você deseja remover as barras de rolagem. Neste exemplo, criaremos uma página de amostra simples para mostrar como você pode ocultar a barra de rolagem horizontal, mas sua funcionalidade de rolagem funcionará. Vamos criar uma página da página da web usando> tags. Dentro dessas tags, criaremos elementos de cabeça e corpo para definir a raiz e o corpo do elemento.
O atributo 'exibição: nenhum' fará com que a barra desapareça sem afetar sua funcionalidade de rolagem.
Para ocultar a barra de rolagem horizontal, permitiremos que nosso conteúdo exceda o limite horizontal da página. Para isso, usaremos "espaço branco: Nowrap"; Isso permitirá que o texto permaneça na mesma linha até usarmos a etiqueta da linha de quebra. Em navegadores mais antigos como 'Internet Explorer', definiremos o 'atributo -ms-overflow-estilo: nenhum'. Enquanto nos navegadores modernos, como no Firefox, podemos usar 'largura de rolagem: nenhum' e para o Chrome e outros navegadores modernos, 'exibir: nenhum' pode ser usado. Quando o conteúdo se estende além dos limites horizontais do elemento no nível do bloco, a propriedade Overflow-X CSS determina o que exibe.
Podemos fazer o mesmo com os elementos da div usando seletores de div no CSS.
Usando o código acima, obteremos uma página da web da seguinte maneira:
Como você pode ver, isso é o mesmo que o anterior, mas desta vez usamos os seletores da div para esconder as barras de rolagem dos contêineres. Estilizamos a div, especificando sua borda como 5px em preto sólido, radio de borda 5px, altura de 150px e largura do contêiner Div para ser 300px.
Exemplo 02: Removendo a barra de rolagem e desativando sua funcionalidade no CSS
Através de seu recurso de transbordamento de CSS, o CSS permite a capacidade de desaparecer a barra de rolagem e desativar a rolagem. Lidar com o conteúdo que excede os limites de seu contêiner é gerenciado por essas propriedades. Esconder a barra de rolagem horizontal pode ser útil porque a rolagem horizontal geralmente é uma escolha terrível. Ao usar 'Overflow-X: Hidden,' podemos fazer a barra de rolagem horizontal desaparecer e parar a rolagem horizontal. Simplesmente adicionamos a regra 'Overflow: Hidden' ao corpo de um elemento de contêiner para parar de rolar enquanto usa este atributo. Isso ocultará todo o material que se estende além dos limites do elemento.
Ao usar este código, nossa barra de rolagem horizontal desaparecerá e não conseguiremos rolar para a esquerda ou direita.
Como você pode ver, o uso de 'Overflow-X: Hidden' removeu a barra de rolagem horizontal, bem como a funcionalidade para rolar para a esquerda ou direita.
No entanto, para exibir material que estende os limites do contêiner, use estouro: visível como uma alternativa.
Como você pode ver, a imagem está excedendo os limites do recipiente.
Exemplo 03: Removendo a barra de rolagem horizontal até precisarmos
Em algumas situações, esconder a barra de rolagem pode melhorar seu design. Em outros casos, a exclusão desta parte da página pode piorar o usuário. A maioria dos visitantes conecta uma barra de rolagem com a ação da rolagem. Portanto, pode parecer incomum para os outros se você usar essa técnica em todo o site inteiro. Além disso, as barras de rolagem indicam quanto da página ainda está visível. A falta de uma barra de rolagem pode ser desanimadora, a menos que você tenha outra sugestão visual de que ainda há mais conteúdo em ser visto. Os testes do usuário podem revelar como a ausência de uma barra de rolagem afeta a experiência do usuário do seu site, embora em muitas situações, escondendo a barra de rolagem até que o usuário comece a rolar.
Como o transbordamento está definido como automático, as barras não aparecerão se o conteúdo não for maior que os limites da janela do navegador.
Como você pode ver, não há barra de rolagem horizontal, pois o limite não foi excedido. Quando o limite for excedido, a barra de rolagem aparecerá na tela para rolar.
Como você pode ver no código HTML, o conteúdo em
é maior que o exemplo anterior, então a barra de rolagem horizontal aparecerá na parte inferior.
A barra de rolagem é adicionada pela configuração automática, mas não será exibida, a menos que haja transbordamento de conteúdo. Como resultado, a barra de rolagem escondida só aparece quando necessário.
Conclusão
Como facilita a navegação, a barra de rolagem é um indicador visual útil para a maioria dos visitantes. No entanto, em algumas circunstâncias, você pode escondê -lo propositadamente para melhorar ou alterar seu design. Com apenas alguns princípios do nosso artigo, você pode usar o CSS para ocultar a barra de rolagem em uma página ou elemento HTML. Neste tutorial, aprendemos a ocultar a barra de rolagem e como esse recurso funciona em diferentes navegadores. Agora, depois de concluir este tutorial, você poderá remover ou esconder facilmente as barras de rolagem sozinho.