Como ocultar a barra de rolagem no CSS

Na navegação na web, a barra de rolagem aparece na vertical e horizontalmente, permitindo que os usuários rolem para baixo e à esquerda-direita. Usando CSS, podemos definir os atributos da barra de rolagem conforme nossa escolha. Por exemplo, esconder e modificar sua cor e largura. Neste artigo, aprenderemos a ocultar a barra de rolagem usando as propriedades CSS.

Entre as muitas maneiras de escondê-lo, a mais comum é as propriedades de transbordamento e scrollbol da webkit.

Aqui estão alguns exemplos práticos em que ocultaremos a barra de rolagem usando essas propriedades.

Tudo bem, vamos começar!

Ocultar barra de rolagem usando a propriedade Overflow no CSS

O "transbordar”A propriedade determina como será o conteúdo quando transbordar da caixa de conteúdo, por exemplo, recorte, exibindo barras de rolagem ou exibindo fora da caixa.

Sintaxe

No CSS, a propriedade Overflow possui a seguinte sintaxe:

Overflow: valor

No local de valor, podemos definir diferentes valores/parâmetros de propriedades de transbordamento, como visível, oculto, rolagem, automático e herdar. Atribua o “escondido”Valor da propriedade Overflow para ocultar a barra de rolagem.

Aqui está um exemplo prático que ilustra esse conceito de uma maneira melhor.

Exemplo: como ocultar a barra de rolagem no CSS usando a propriedade Overflow?

Vamos criar um parágrafo dentro do uso do

tag o seguinte:

Nós rolamos para baixo e a esquerda-direita da página da web enquanto navegamos na web usando a barra de rolagem que aparece na vertical e horizontalmente. Em html, aparece por padrão. Usando CSS, podemos definir atributos da barra de rolagem conforme nossa escolha eu.e largura da barra de rolagem e cor também. Também escondemos a barra de rolagem, usando CSS.
Entre as muitas maneiras de escondê-lo, as mais comuns estão as propriedades de transbordamento, largura da barra de rolagem e webkit-scrollbar.

O resultado do código fornecido será:

Aqui, podemos ver que a barra de rolagem está aparecendo verticalmente. Vamos usar a propriedade CSS Overflow para escondê -la.

No CSS, escreva o seguinte código e defina a propriedade Overflow como “escondido”:

corpo
estouro: oculto;

Como resultado, a barra de rolagem desaparecerá da página:

Podemos ver que a barra de rolagem foi removida, mas a funcionalidade da barra de rolagem também está desativada. No entanto, usando CSS, podemos ocultar a barra de rolagem sem desativar sua funcionalidade.

Ocultar barra de rolagem no CSS usando a propriedade "webkit-scrollbar"

O "WebKit-ScrollBar”Pseudo-elemento pode ser usado para estilizar a barra de rolagem de um elemento no CSS. Também nos ajuda a esconder a barra de rolagem. Esta propriedade funciona apenas em navegadores baseados em webkit, como Chrome, Opera, Safari, Edge, etc.

Sintaxe

Para entender a propriedade Webkit, devemos primeiro entender sua sintaxe:

Body ::-Webkit
/ *Exibir, largura, estilo */

O Webkit tem os seguintes elementos que servem funcionalidades diferentes que alguns são:

• WebKit-ScrollBar: É usado para modificar toda a barra de rolagem.
• WebKit-ScrollBar-Button: É usado para modificar os botões esquerda-direita para baixo da barra de rolagem.
• WebKit-ScrollBar-Track: É usado para modificar a faixa de rolagem.
• WebKit-ScrollBar-Thumb: É usado para modificar a alça de rolagem arrastável.
• Webkit-resizer: É usado para redimensionar ou modificar uma alça de arrasto.

Para esconder a barra de rolagem, o “WebKit-ScrollBar”Pseudo-elemento é usado.

Exemplo: como ocultar a barra de rolagem no CSS usando a propriedade Webkit?

Para esconder a barra de rolagem usando o “WebKit-ScrollBar”Propriedade, defina o valor da tela como“nenhum" como abaixo:

Body ::-WebKit-ScrollBar
Mostrar nenhum;

Agora, na página da web, podemos percorrer a longa página da web sem ver a barra de rolagem:

A barra de rolagem está escondida e você pode percorrer o conteúdo do navegador usando as teclas de cima para baixo.

Conclusão

O CSS “transbordar" e "webkit”As propriedades nos permitem esconder a barra de rolagem da página da web. A propriedade Overflow também desativa a funcionalidade da rolagem; No entanto, a propriedade Webkit permite rolar com a ajuda de teclas de seta. Esta redação explicou como a propriedade do Overflow e a propriedade Webkit funcionam no CSS.