Ocultar barra de rolagem em CSS
-
Defina
displaycomononepara o Pseudo-elemento::-webkit-scrollbarpara ocultar a barra de rolagem em CSS -
Defina
scrollbar-widthcomononepara ocultar a barra de rolagem em CSS
Este tutorial irá apresentar alguns métodos para ocultar a barra de rolagem em uma página da web enquanto ainda rola a página da web.
Defina display como none para o Pseudo-elemento ::-webkit-scrollbar para ocultar a barra de rolagem em CSS
Podemos usar o seletor de pseudo-elemento ::-webkit-scrollbar para estilizar a barra de rolagem do elemento em CSS. No entanto, esse seletor está disponível apenas em navegadores baseados em Webkit, incluindo Chrome, Opera, Safari, Edge, etc. Podemos usar o pseudo-elemento ::-webkit-scrollbar para selecionar toda a barra de rolagem da página da web e definir a propriedade display para none. Isso nos permitirá rolar pela longa página da web, mas irá ocultar a barra de rolagem.
Por exemplo, crie um arquivo PHP e escreva a estrutura HTML básica no arquivo. Dentro da seção body, abra a tag PHP <?php e escreva um texto Hello World na variável $text. Faça um loop na variável 100 vezes e exiba o texto. Em CSS, use o pseudo-elemento ::-webkit-scrollbar para selecionar a barra de rolagem. Em seguida, defina a propriedade display como none.
No exemplo acima, usamos PHP para repetir o texto 100 vezes, de modo que a página da web se torne longa para rolar pela página da web. O código PHP faz com que o texto Hello World seja impresso 100 vezes em uma nova linha. Definir a propriedade display como none oculta a barra de rolagem, ainda nos permitindo rolar a página. Assim, podemos alcançar o recurso de barra de rolagem oculta.
Código de exemplo:
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
::-webkit-scrollbar {
display: none;
}
Defina scrollbar-width como none para ocultar a barra de rolagem em CSS
Podemos usar a propriedade scrollbar-width e defini-la como none para ocultar a barra de rolagem em CSS. Ele irá ocultar a barra de rolagem da página da web. A outra opção, auto, define a barra de rolagem padrão, e a opção thin fará com que a barra de rolagem pareça mais fina de acordo com o navegador. No entanto, a propriedade só funciona para o navegador Firefox. Usaremos a propriedade overflow-y para manter a funcionalidade de rolagem cortando o conteúdo. Funciona quando um elemento de nível de bloco transborda na parte superior e nas bordas do botão. Podemos usar o mesmo script PHP como o primeiro método para demonstrar a desativação da barra de rolagem.
Por exemplo, crie um div com a classe container. Dentro de div, faça um loop no texto como no primeiro método. Em CSS, dê uma cor de fundo junto com alguma largura e altura para o contêiner. Defina a propriedade scrollbar-width como none e defina a propriedade overflow-y como scroll.
No exemplo abaixo, definir a scrollbar-width como none ocultará a barra de rolagem e o overflow-y definido como scroll manterá viva a funcionalidade de rolagem. Desta forma, podemos rolar por uma longa página escondendo a barra de rolagem.
Código de exemplo:
<body>
<div class="container">
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
}
?>
</div>
</body>
.container {
scrollbar-width: none;
background-color: #bbb;
width: 500px;
height: 600px;
overflow-y: scroll;
}
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