Há mais nas barras de rolagem do que você imagina
Barras de rolagem. Uma coisa muito mundana que todo site e aplicativo tem. Historicamente, tem sido difícil personalizar consistentemente o estilo da barra de rolagem na web. Portanto, é compreensível que os desenvolvedores frontend não prestem muita atenção a eles. Embora seja bom que a maioria de nós (espero) não esteja escrevendo milhares de linhas de JavaScript para recriar barras de rolagem , devemos prestar pelo menos um pouco mais de atenção a elas. Vejamos algumas das coisas que podemos fazer em 2022 para melhorar a experiência de rolagem para nossos usuários.
O básico
Quando o conteúdo de um elemento é muito grande para caber nele, podemos usar overflow: autopara torná-lo rolável. Há mais do que isso , mas isso é tudo que você precisa para fazer as barras de rolagem padrão aparecerem.
Quanto ao estilo das barras de rolagem, você pode usar as -webkitpropriedades prefixadas da barra de rolagem combinadas com o padrão scrollbar-widthe as scrollbar-colorpropriedades. Houve inúmeros posts sobre este tópico, então não vou me incomodar em repetir essas partes. Eu recomendo o guia da barra de rolagem do Ahmad Shadeed se você ainda não estiver familiarizado com essas propriedades.
Eu quero mencionar o postcss-scrollbar plugin que gera as -webkitpropriedades da barra de rolagem prefixada dos padrões. O que significa que você pode obter estilos entre navegadores apenas com isso:CÓPIA DE
.scroll-container {
overflow: auto;
scrollbar-width: thin;
scrollbar-color: hsl(0 0% 50%);
/* postcss-scrollbar will add the -webkit version automatically! */
}
Parece bastante simples. Agora vamos para as partes mais interessantes.
Barras de rolagem temáticas
Se você decidiu que ainda quer confiar nas barras de rolagem padrão, é justo. Mas você precisa ter cuidado aqui se o seu site suportar um tema escuro. Vejo que muitos sites implementam um modo escuro com suas barras de rolagem ainda presas no modo claro. Veja como são os documentos do remix.run no Windows no modo escuro:
Isso pode ser corrigido usando a color-schemepropriedade ou metatag. Você provavelmente deveria estar fazendo isso de qualquer maneira, também por razões que não sejam da barra de rolagem. Thomas Steiner tem um ótimo artigo sobre web.dev se você quiser saber mais.CÓPIA DE
html {
/* defer to OS preference */
color-scheme: dark light;
/* override, assuming the theme toggler sets a data-theme attribute */
&[data-theme=light] { color-scheme: light; }
&[data-theme=dark] { color-scheme: dark; }
}
As peculiaridades da barra de rolagem de vários sistemas operacionais
Nesta seção, falarei sobre os diferentes ambientes, as expectativas, os comportamentos e os problemas que os acompanham, bem como algumas especulações futuras. Se tudo o que importa é o código, sinta-se à vontade para rolar até o final desta seção. 😅
janelas
Como demonstrei na seção anterior, o Windows sempre teve algumas das barras de rolagem mais feias de qualquer plataforma. O Windows 10 tem especificamente as barras de rolagem mais feias em todos os navegadores. Mesmo se você definir o esquema de cores certo, eles parecem muito quadrados e grossos.
O Windows 11 está tentando modernizar as barras de rolagem, tornando-as mais finas e sobrepostas. Isso pode ser observado nas várias interfaces primárias (por exemplo, o aplicativo Configurações) em todo o sistema operacional. Quanto aos navegadores, o Firefox 100+ já o está enviando, enquanto o Edge/Chrome o tem de alguma forma atrás de uma bandeira.
A implementação do Firefox em particular me preocupa porque a barra de rolagem é fina e desaparece a menos que você esteja interagindo ativamente com ela. Para piorar as coisas, parece não haver nenhuma maneira de alterar esse comportamento programaticamente. O Firefox respeita a configuração “Sempre mostrar barras de rolagem” no Windows 11, mas está desativado por padrão e não podemos esperar que a maioria dos usuários o ative. Eu realmente espero que isso seja resolvido em uma atualização futura. Por enquanto não podemos fazer nada.
No Chromium, as coisas são mais simples: se você especificar pelo menos uma dessas -webkit-scrollbarpropriedades prefixadas, você se tornará responsável por fornecer todo o estilo da barra de rolagem. Isso é exatamente o que queremos, pelo menos até que as barras de rolagem do Windows 11 sejam lançadas no Chromium.
Mac OS
Embora as barras de rolagem do macOS pareçam menos ofensivas, elas vêm com seu quinhão de problemas.
O primeiro é um pouco complicado, mas acho super frustrante não poder simplesmente mover meu cursor para a borda direita de uma janela do navegador e usá-lo para rolar. Isso ocorre porque o macOS reserva as bordas para redimensionar/mover a janela, mesmo que o cursor ainda esteja pairando sobre o polegar da barra de rolagem. Isso efetivamente torna a barra de rolagem já fina ainda mais fina (embora apenas para o scroller da janela de visualização).
O segundo é um problema mais relacionável: barras de rolagem que desaparecem automaticamente. Eles podem oferecer uma interface agradável e limpa… se o usuário souber que uma parte da página é rolável. Na prática, eles são muito frustrantes de lidar. Recentemente, tive uma experiência em que literalmente não consegui encontrar o ingresso para uma conferência porque estava oculto fora da porta de rolagem e a barra de rolagem estava invisível. Em outras palavras, o desaparecimento de barras de rolagem pode literalmente custar dinheiro . Para contornar isso, talvez você possa forçar a altura da porta de rolagem para que o último item fique parcialmente visível. Ou você pode usar algum JavaScript para detectar a posição de rolagem e adicionar uma sombra de rolagem .
Ambos os problemas podem ser evitados especificando o estilo personalizado da barra de rolagem, portanto, devemos ser bons aqui.
Android, iOS e telas sensíveis ao toque
Dispositivos touchscreen são interessantes. Eles têm as mesmas barras de rolagem finas, sobrepostas e desaparecendo que eu enquadrei como um problema no macOS, mas o uso é bem diferente: o usuário não interage diretamente com a barra de rolagem e, em vez disso, arrasta o polegar contra a porta de rolagem. Além disso, como a tela geralmente é menor, o conteúdo transborda com mais frequência e espera-se que o usuário role muito mais para encontrar o conteúdo. É também por isso que existem recursos especiais projetados especificamente para essa modalidade, como (1) rolagem baseada em momento (inércia) e (2) destaque visual ou animação de mola ao atingir a borda de um contêiner de rolagem. O Android está ainda mais atento a isso e decide sempremostre a barra de rolagem quando um elemento rolável aparecer pela primeira vez e, em seguida, alterne para o comportamento normal de desaparecimento automático depois que o usuário rolar pelo menos uma vez (sinalizando que agora eles estão cientes de que a área é rolável).
Tudo isso para dizer, eu gosto bastante do comportamento padrão dessas barras de rolagem e gostaria de preservá-lo. Isso é possível usando a pointer consulta de mídia , que nos permitirá estilizar condicionalmente as barras de rolagem com base se o usuário estiver em um dispositivo apontador de alta precisão (por exemplo, mouse) ou de baixa precisão (por exemplo, tela sensível ao toque).CÓPIA DE
@media (pointer: fine) {
.scroll-container {
/* ...custom scrollbar styles only for desktop */
}
}
Eu usei essa abordagem em vários projetos e me sinto muito bem com os resultados.
Evitando a mudança de layout
Um problema overflow: autoé que ele só mostra a barra de rolagem se o conteúdo estiver realmente transbordando, o que significa que pode causar uma mudança de layout se uma barra de rolagem aparecer de repente. Historicamente, isso foi possível corrigir usando overflow: overlay(no Chrome) para evitar que a barra de rolagem ocupe espaço e/ou usando overflow: scrollpara sempre ocupar espaço.
Atualmente, podemos dizer explicitamente ao navegador para reservar espaço para barras de rolagem usando scrollbar-gutter: stable. É compatível com Chrome e Firefox, e podemos recorrer ao overflow: scrollSafari. Se você usar uma faixa de barra de rolagem invisível, esse fallback deve funcionar de forma idêntica a scrollbar-gutter.CÓPIA DE
.scroll-container {
overflow: scroll;
@supports (scrollbar-gutter: stable) {
overflow: auto;
scrollbar-gutter: stable;
}
}
Vale a pena notar aqui que, se você quiser scrollbar-gutterna viewport, é complicado fazê-lo funcionar no <body>e pode ser mais fácil movê-lo para o :rootou para um filho.
Mais guloseimas da barra de rolagem do CSS moderno
Embora não esteja diretamente relacionado ao estilo da barra de rolagem, há mais algumas propriedades que quero mencionar brevemente que podem ajudar a melhorar a experiência de rolagem. A riqueza de ferramentas que o CSS nos oferece hoje nunca deixa de me surpreender.
Preenchimento de rolagem
scroll-padding permite criar um deslocamento na borda da porta de rolagem. Isso é incrivelmente útil quando você tem um cabeçalho fixo que, de outra forma, encobriria os cabeçalhos rolados por meio de links de salto na página ou URLs de fragmentos.CÓPIA DE
.scroll-container {
scroll-padding-top: var(--header-height);
}
Comportamento de rolagem
scroll-behavior permite ativar a rolagem suave, o que também é super legal para links de salto na página. Não se esqueça de protegê-lo em uma verificação de movimento reduzido para melhor acessibilidade!CÓPIA DE
@media (prefers-reduced-motion: no-preference) {
.scroll-container {
scroll-behavior: smooth;
}
}
Comportamento de rolagem
Nomeado de forma semelhante ao anterior, overscroll-behavior faz algo bem diferente: permite evitar o encadeamento de rolagem em áreas de rolagem aninhadas. Útil em alguns lugares, como caixas de diálogo e barras laterais, onde você não deseja que a página subjacente comece a rolar quando chegar ao final do contêiner de rolagem atual.CÓPIA DE
.scroll-container {
overscroll-behavior: contain;
}
Encaixe de rolagem
Introduzido há algum tempo , o snap de rolagem CSS passou por inúmeras melhorias e correções. Hoje é uma maneira bastante confiável e ideal de construir algo como um componente de galeria ou histórias com JavaScript quase zero.CÓPIA DE
.scroll-container {
scroll-snap-type: x mandatory;
& > * {
scroll-snap-align: start;
}
}