Sem dúvida, a rolagem desempenha um papel vital nos aplicativos da Web. No entanto, você pode não precisar dessa barra de rolagem em sua página em algum momento. Por exemplo, se o contêiner cobrir apenas vinte e cinco por cento de uma página da web e estiver alinhada à esquerda, a barra de rolagem adicionada certamente entrará no centro. Em tal situação, você pode usar algumas propriedades CSS para desativar a barra de rolagem.

Este artigo abordará o método para desativar a barra de rolagem no CSS.

Como desativar a barra de rolagem no CSS?

Para desativar a barra de rolagem em uma página, use as seguintes propriedades CSS:

• transbordamento-y (Desative a barra de rolagem vertical)
• Overflow-x (Desativar a barra de rolagem horizontal)
• transbordar (Desativar barras de rolagem vertical e horizontal)

Vamos explorar cada propriedade CSS um por um.

Método 1: Use a propriedade Overflow-Y para desativar a barra de rolagem vertical no CSS

O "transbordamento-y”Propriedade especifica o que acontecerá se o conteúdo não se encaixar no contêiner de uma maneira de altura. Também é utilizado para exibir o conteúdo de transbordamento de um elemento em nível de bloco e adicionar ou desativar uma barra de rolagem.

Então, vamos dar um exemplo para verificar o procedimento de desativar a barra de rolagem vertical com a ajuda da propriedade CSS Overflow-Y.

Exemplo

Para nossa página HTML, desativaremos a barra de rolagem vertical presente no lado direito:

Coloque os elementos HTML desejados, como no nosso caso, adicionaremos um título no “”Tag do arquivo html:

Desativando a barra de rolagem

Para ocultar a barra de rolagem vertical, defina o “transbordamento-y"Propriedade para"escondido”. A altura e largura de “200%”Será usado para tornar a página mais longa e maior. É assim que intencionalmente obteremos as barras de rolagem em nossa página:

Salve o código fornecido e execute seu arquivo HTML no navegador:

Como você pode ver, desativamos com sucesso a barra de rolagem vertical usando a propriedade CSS Overflow-Y.

Método 2: Use a propriedade Overflow-X para desativar a barra de rolagem horizontal no CSS

Quando o conteúdo não se encaixa no contêiner de maneira largura, o “Overflow-x”A propriedade é usada para gerenciar esses cenários. Ele define o que mostra quando o conteúdo adicionado transborda de um elemento em nível de bloco, bordas direita e esquerda. Esta propriedade CSS também pode ser utilizada para desativar a barra de rolagem horizontal.

Exemplo

Agora, desativaremos a barra de rolagem horizontal de luz abaixo da nossa página HTML:

Para esconder a barra de rolagem horizontal, defina o “Overflow-x para "escondido”E adicione o valor das propriedades de altura e largura, conforme declarado no exemplo anterior:

Saída

Deseja desativar barras horizontais e verticais de uma só vez? Se sim, siga a próxima seção!

Método 3: Use a propriedade Overflow para desativar barras de rolagem vertical e horizontal no CSS

Quando o conteúdo não se encaixa no contêiner horizontalmente e verticalmente, o “transbordar”Propriedade especifica se você deve adicionar barras de rolagem ou clipe o conteúdo. Você também pode usar esta propriedade CSS para desativar barras de rolagem vertical e horizontal simultaneamente.

Exemplo

No mesmo arquivo html, adicionaremos o “transbordar”Propriedade e atribui -lhe um“escondido" valor. Isso desativará a barra de rolagem para ambos os lugares, horizontal e verticalmente:

Saída

Oferecemos instruções sobre a desativação de barras de rolagem usando diferentes propriedades do CSS.

Conclusão

Para desativar as barras de rolagem no CSS, você pode usar “Overflow-x","transbordamento-y", e a "transbordar”Propriedades. A propriedade Overflow-X é utilizada especificamente para desativar a barra de rolagem vertical e a propriedade Overflow-Y para desativar barras de rolagem horizontal. Além disso, a propriedade Overflow auxilia em desativar barras verticais e horizontais de uma só vez. Este artigo discutiu os métodos para desativar as barras de rolagem no CSS.