Javascript Adicionar Remover Classe na Rolagem

| | | | | | | | | | | | | | | | | |

Barras de rolagem e experiência do usuário

Os usuários agora estão acostumados a alguma experiência ao navegar em sites. Por exemplo, você esperaria que um logotipo da empresa no canto superior esquerdo de um site o levasse à página inicial. Mas e se não funcionar? E se tudo neste site fosse oposto do que você pensou que seria?

Imagine se houvesse uma barra de rolagem, mas quando você move o botão de rolagem do mouse ou slide passe o dedo no touchpad do dispositivo, nada acontece. Seria considerado uma experiência de usuário horrível.

O que faz ou prejudica uma boa experiência de usuário pode ser um trabalho por si só, mas faz parte disso - funciona definitivamente a capacidade e as barras de rolagem para ocultar por razões estéticas.

As barras de rolagem são ótimos indicadores do que podemos esperar ver em uma página da web. Se virmos uma barra de rolagem, esperamos que seja necessário rolar para baixo para visualizar o conteúdo. Quando você não vê uma barra de rolagem, geralmente é por um dos dois motivos:

  1. O que você vê é o que você obtém - a altura e a largura da área visível (a tela) correspondem a a altura e a largura do site.
  2. O design do site inclui uma espécie de seta ou a função de animação que mostra quanto mais conteúdo está disponível através da rolagem. Somente quando você começa a rolar a barra de rolagem aparece. O padrão é ficar oculto até lá.
  3. Como desenvolvedor, implementar o uso correto da barra de rolagem melhorará a experiência do usuário de um site, o que manterá os clientes no site.

Observação lateral: certifique-se de usar barras de rolagem horizontais quando intencionalmente quiser usá-las. Se elas aparecerem acidentalmente em seu site, geralmente é porque algo está errado com o dimensionamento do componente . Não oculte as barras de rolagem horizontais no objetivo quando eles não deveriam estar presentes.

Implementação de CSS

A primeira coisa a observar sobre essa implementação é que todos os principais navegadores são criados iguais. O que funciona para o Firefox não funcionará para o Chrome ou Internet Explorer e vice-versa. O CSS usa o que chamamos de prefixos de provedor ou prefixos de navegador para nos ajudar a fornecer suporte para vários navegadores. Apresentamos a seguir:

< br>

Prefixo do fornecedor da folha de dicas

prefixo do fornecedor Cobertura do navegador
-webkit- Chrome , Safari, versões mais recentes do Opera e a maioria dos navegadores iOS, incluindo Firefox para iOS
-moz - Firefox (não iOS)
-o- Versões mais antigas do Opera
-ms- Internet Explorer e MS Edge

URL: crédito: MDN - CSS Prefixes

Alt Text: Mozilla Developer Network criou uma folha de dicas útil para lembrar qual prefixo use

Legenda: MDN criou uma folha de dicas útil para lembrar qual prefixo usar para o navegador

A questão então se torna: como sabemos quando precisamos de prefixos e quando eles não são? Os criadores de CSS estão sempre experimentando novas propriedades e novas maneiras de fazer as coisas - se houver uma propriedade nova o suficiente, provavelmente ainda não é compatível com todos os navegadores.

Felizmente, existem ferramentas que analisam seu CSS e adicione os prefixos que você precisa. Você também pode fazer isso manualmente e usar um site como caneuse ou documentos para seu MDN para ajudar a determinar a compatibilidade do navegador.

Deixe o código

Quando executamos este código no Chrome, ele deve produzir um div de fundo cinza e algum texto que você pode percorrer. As duas implementações mais comuns estão incluídas - Firefox está no topo do código no