Desativar barra de rolagem em CSS
-
Defina
overflowcomohiddenpara as tagshtmlebodypara desativar a barra de rolagem em CSS -
Defina
overflow-xcomohiddenpara desativar a barra de rolagem horizontal em CSS
Este tutorial irá apresentar alguns métodos para desativar a funcionalidade da barra de rolagem em uma página da web.
Defina overflow como hidden para as tags html e body para desativar a barra de rolagem em CSS
Podemos usar a propriedade CSS overflow para desabilitar a barra de rolagem no CSS. A propriedade overflow define o comportamento da barra de rolagem em uma página da web. A barra de rolagem pode ser ocultada ou tornada visível quando o conteúdo de um elemento é maior do que a área especificada. Quando usamos o valor hidden para a propriedade overflow, o conteúdo é recortado para a área do elemento e o resto do elemento ficará invisível. Podemos configurá-lo para scroll para adicionar uma barra de rolagem para ver o resto do conteúdo não recortado. Usaremos PHP para gerar um texto longo em nossa página da web. Em seguida, desativaremos a barra de rolagem.
Por exemplo, crie uma variável $text em PHP e atribua a ela o valor Hello World. Use o loop for para iterá-lo 100 vezes. Não se esqueça de adicionar a tag br ao exibir a variável. Isso cria 100 linhas do texto Hello World. Inclua o PHP dentro do body do HTML. Em CSS, selecione as tags html e body. Defina a margem para 0 e dê a altura de 100%. Em seguida, defina a propriedade overflow como oculta.
No exemplo abaixo, definimos a height do html e do body para 100%. Isso significa que o body e a height terão 100% da altura de seus contêineres pai. A altura desses contêineres será igual à altura do navegador. O texto será cortado na altura do navegador e o resto ficará invisível. Podemos até definir a propriedade margin para 0 se a margem tiver sido substituída por algum outro valor para desativar a barra de rolagem. Podemos até usar overflow-y em vez de overflow e defini-lo como hidden. Isso desativará a barra de rolagem verticalmente.
Código de exemplo:
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
html, body
{
height: 100%;
overflow: hidden
}
Defina overflow-x como hidden para desativar a barra de rolagem horizontal em CSS
Podemos usar a propriedade overflow-x e defini-la como oculta para desativar a barra de rolagem horizontal em CSS. Podemos testar a desativação da barra de rolagem horizontalmente, limitando um texto a apenas uma linha. Podemos repetir um texto várias vezes em PHP e usar CSS para forçá-lo a aparecer em uma linha.
Por exemplo, faça um loop no texto Helloo World usando PHP como no método acima. Não use a tag br para que o texto não apareça na próxima linha. Em CSS, defina a propriedade display como inline-block para a tag body. Defina a propriedade white-space como nowrap na tag html. Em seguida, defina overflow-x como hidden selecionando a tag body.
Quando definimos display como inline-block, força o texto a ser mostrado em uma única linha. Para obter o texto em uma única linha, precisamos definir a propriedade white-space do contêiner pai como nowrap. Até agora, a barra de rolagem horizontal funcionou perfeitamente. Definir o overflow-x como hidden recortará o texto de acordo com a janela de visualização e a barra de deslocamento horizontal será desativada.
Código de exemplo:
<body>
<?php
$text = "Helloo World";
for($i=0; $i<100; $i++){
echo $text;
}
?>
</body>
html{
white-space:nowrap;
}
body {
display:inline-block;
overflow-x: hidden
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn