CSS remove a barra de rolagem
Exemplo 01:
Vamos levar no HTML para criar uma barra de rolagem automática na página da web. Para isso, você não precisa adicionar muitas propriedades ou tags que não sejam tags usuais normais para parágrafos e títulos. Temos iniciado este exemplo com a criação de um novo arquivo HTML chamado "CSS". Ao abrir este arquivo no código do Visual Studio, começamos a adicionar um script html a ele. A primeira tag que adicionamos a ela é a etiqueta principal "html" seguida pela tag "Head" e "Body".
Quando olhamos para o corpo desta página HTML, ele tem um título do segundo maior tamanho (i.e., H2) e dois parágrafos através das tags "P". A primeira etiqueta de parágrafo contém um tipo de texto longo que se move para a próxima linha, enquanto o segundo parágrafo contém dados simples de uma linha. O segundo parágrafo também contém uma tag "forte" simples para fazer duas palavras ousadas. Dentro da tag "estilo" de "Head", estamos definindo o valor para a altura e largura de todo um "corpo" de uma página html: 500px e 1000px, respectivamente.
Salve o script HTML recém -adicionado com Ctrl+S, toque no menu "Executar" da barra de tarefas do Visual Studio e clique no "Run Without Depurging". Seria solicitar a ferramenta em que nosso código será executado. Selecione o navegador “Chrome” e você estará pronto para ir. A saída abaixo está mostrando que o cabeçalho e seus dois parágrafos foram exibidos. Devido a dados de texto muito longos no primeiro parágrafo e uso de janelas pequenas no Chrome, temos a barra de rolagem automática gerada na direita e na parte inferior do navegador. Isso ocorre porque qualquer navegador possui barras de rolagem incorporadas que seriam geradas com o uso de uma grande quantidade de dados.
Agora, para ver a linha restante na página da web, role para a direita usando a barra de rolagem como mostrado.
Vamos tentar remover a barra de rolagem da página da web. Usaremos a propriedade Overflow definida como "Hidden" dentro da tag de estilo para o "corpo" de uma página da web. Não deixará o navegador gerar barras de rolagem automáticas, mesmo se adicionarmos uma grande quantidade de dados à página da web. Vamos salvar e executá -lo.
Depois de executá -lo no navegador Chrome, temos a saída como esperávamos. Embora o primeiro parágrafo contenha os dados de texto longo, o navegador não gerou as barras de rolagem para ver a linha oculta restante. O terceiro parágrafo também está escondido nesta janela do navegador.
Ao alterar o tamanho do navegador Chrome usando o ponteiro do mouse, o terceiro parágrafo foi exibido agora, como mostrado abaixo.
Quando ampliamos a janela do navegador do lado direito, o restante da linha oculta será exibido sem o uso de qualquer barra de rolagem.
Exemplo 2:
Vamos criar outro breve exemplo para ver como podemos criar mais de 1 barra de rolagem para diferentes seções divididas de uma página HTML. Além disso, veremos como podemos remover uma dessas barras de rolagem também. Começando com a tag html, adicionamos duas tags "div" dentro da tag "Body" principal. A primeira tag "div" foi especificada com a classe "A" para diferenciação no nível de estilo. A segunda tag "div" não está usando a "classe" porque estamos usando o estilo em linha para esta tag em particular. Estamos usando a altura específica de 10px e propriedade cor de fundo para colorir a seção "roxo". Esta seção "div" contém duas linhas. Um deles está marcado com a tag "Mark". A tag "Mark" é usada para destacar o texto especificado dentro dela para a cor amarela e torná -la proeminente na página da web. Adicionamos a linha marcada, pois esta tag estará usando a barra de rolagem. Ambas as tags "div" foram encerradas aqui após a tag "Mark". A etiqueta corporal também foi fechada aqui.
Vamos dar uma olhada na etiqueta de estilo usada na etiqueta principal deste script html. Temos usado o objeto "A" da classe para estilizar a seção externa "div". Estamos definindo a largura da barra de rolagem como "Nenhum" para a seção "Div" externa usando a propriedade de largura da barra de rolagem e transbordamento na direção vertical foi ativada definindo o valor "rolagem" para a propriedade "Overflow-y". Junto com isso, estabelecemos a altura máxima de uma seção externa "div" para 100px usando a propriedade Max-Hight para a classe "A". O estilo e a etiqueta da cabeça foram concluídos aqui e salvamos nosso código para testar a saída no navegador Chrome via Código do Visual Studio.
A exibição da página da web para este script html seria semelhante a como mostrado na imagem abaixo. A barra de rolagem para a segunda seção “div” da cor roxa com altura de 10px foi gerada na outra seção “div” devido à sua altura, 150px. O texto usado nele também é destacado com o uso da tag "Mark". Por outro lado, a seção externa “div” não possui barra de rolagem visível gerada neste tamanho de janela. É porque definimos o valor para a propriedade "Width de largura de rolagem" de "div" para "nenhum".
Você pode tornar a barra de rolagem visível, alterando o tamanho de uma janela muito pequena, como mostrado. Somente a barra de rolagem vertical seria gerada, pois usamos um conjunto de transbordamento para "rolar". Mesmo se você encurtar a janela do lado direito, a barra de rolagem horizontal nunca seria gerada.
Vamos tentar remover a barra de rolagem vertical automática da página da web também. Para isso, estaremos tentando o mesmo código HTML atualizando o valor de sua propriedade "Overflow-y". Estamos configurando -o como "nenhum" para que nenhuma barra vertical para a seção "div" externa seja gerada.
Sem atualizar nenhuma outra coisa dentro deste script, nós o executamos e obtivemos a saída mostrada do Bellow. Agora, mesmo se alterarmos o tamanho de uma janela cromada para muito menor do fundo esquerdo ou superior, ele não gera nenhuma barra de rolagem vertical ou horizontal para o "div" externo.
Conclusão:
O artigo de hoje é uma coleção de alguns exemplos HTML para ilustrar como os navegadores geram barras de rolagem automáticas e como você pode removê -las do navegador. No primeiro exemplo, tentamos as tags de parágrafos para adicionar uma grande quantidade de dados para gerar automaticamente barras de rolagem e usamos a propriedade Overflow para ocultar essas barras de rolagem. Junto com isso, tentamos remover especificamente as barras de rolagem unidirecional da página da web usando a propriedade "Overflow-Y" das páginas HTML. O uso das seções "div" foi uma grande ajuda.