Uma barra de rolagem (barra de rolagem) é um mecanismo simples, mas eficaz, que atua como um meio primário pelo qual você pode visualizar documentos grandes. Mas não é só disso que as barras de rolagem são capazes! Esses modestos cavalos de trabalho também são muito bons em dizer aos usuários qual é o tamanho dos documentos com os quais eles interagem. Como resultado, as barras de rolagem carregam uma carga dupla. Eles ajudam a trabalhar com vários materiais e informam o usuário sobre o tamanho desses materiais.
A lógica simples e compreensível das barras de rolagem pode ser alterada durante a implementação dos mecanismos de scrolljacking. Isso acontece quando o comportamento padrão da barra de rolagem é alterado, o que viola o esperado pela correspondência do usuário entre o comprimento do documento e a altura da barra de rolagem.
Além disso, programas para dispositivos com telas sensíveis ao toque popularizaram a idéia de ocultar barras de rolagem. Com essa abordagem, as barras de rolagem ficam invisíveis até que o usuário comece a rolar um elemento que não se encaixa em uma determinada área de visualização. Como resultado, acontece que, por uma questão de apelo visual dos aplicativos, os designers sacrificam a clareza das interfaces. O usuário pode precisar de algum tempo para entender que o conteúdo de um determinado contêiner pode ser rolado. Esse contêiner pode parecer que não suporta rolagem ou simplesmente não precisa de rolagem.
Os sistemas operacionais de desktop clássicos adotaram essa tendência móvel, tentando minimizar a interferência das barras de rolagem tradicionais no design do aplicativo.
O material, cuja tradução publicamos hoje, é dedicado a alguns recursos do uso de barras de rolagem em aplicativos da web.
Alguma terminologia
Antes de continuarmos - vamos definir alguns termos que usaremos aqui. Ou seja, distinguimos dois tipos de barras de rolagem:
- Barras de rolagem fixas (intrusivas) - aquelas que ocupam o espaço da tela. Eles não se sobrepõem ao conteúdo que você está visualizando, mas ficam ao lado deles.
- Barras de rolagem não fixas (discretas) - aquelas que se sobrepõem ao conteúdo. Eles não retiram o espaço da tela do que está nos contêineres aos quais pertencem.
Comportamento padrão das barras de rolagem modernas
Por padrão, as barras de rolagem do iOS e do Android não são corrigidas.
No macOS (em particular, estamos falando sobre o macOS Mojave relevante no momento da redação deste material) as barras de rolagem ficam ocultas até que o elemento comece a rolar. Esse é o comportamento padrão do sistema em uma situação em que um mouse não está conectado ao computador. Existem três opções para exibir as barras de rolagem (as configurações correspondentes podem ser encontradas em
General > System Preferences ).
Configurações da barra de rolagem no macOS MojaveVerificou-se que essas configurações controlam o comportamento das barras de rolagem no Chrome, Firefox e no novo Edge baseado no Chromium.
Aqui está um vídeo, que você pode assistir para aprender sobre como as configurações acima afetam as barras de rolagem e como as barras de rolagem, além de permitir a rolagem de conteúdo, afetam-no. Aqui estão alguns trechos deste vídeo.
A barra de rolagem fixa no macOS está sempre visível e ocupa algum espaço na telaA barra de rolagem não fixa do MacOS sobrepõe o conteúdo ao rolar um documentoA barra de rolagem não corrigida no macOS fica oculta no momento em que o documento não é roladoNo Windows 10, em
Settings > Display > Simplify and personalize Windows , você pode encontrar configurações semelhantes.
Configurações da barra de rolagem no Windows 10Infelizmente, mesmo quando a opção
Automatically hide scroll bars in Windows , isso não afeta o Firefox, Chrome, Internet Explorer e Edge. No caso do Edge, estamos falando sobre a variante do navegador baseada no Chromium e a variante baseada no EdgeHTML.
Visão geral da tarefa
Aqui está a aparência da página que analisamos acima no macOS no Windows.
Página da barra de rolagem do WindowsAs barras de rolagem do Windows são corrigidas por padrão. Além disso, eles parecem bastante "pesados" em termos de design. Eles, em sua versão padrão, são muito mais amplos que os do MacOS. Além disso, a cor das barras de rolagem no Windows geralmente corresponde às configurações do sistema, e não à paleta de cores de uma página da web.
Designers acostumados ao ambiente macOS, mas que desenvolvem aplicativos da Web projetados para plataformas diferentes, podem achar difícil melhorar a aparência de seus projetos em diferentes sistemas operacionais e não gastam muitos recursos do sistema na renderização.
Requisitos do projeto
Queremos desenvolver um aplicativo Web, as barras de rolagem usadas diferem nos seguintes recursos:
- Eles devem parecer atraentes ao exibir páginas em um sistema operacional de desktop. Isso é especialmente importante ao exibir recipientes cujo conteúdo não se encaixa totalmente neles. As barras de rolagem são exibidas dentro desses contêineres, o que significa que o design dessas barras de rolagem deve estar de acordo com o design dos contêineres. Acreditamos que, no caso de barras de rolagem que permitem rolar a página inteira, isso não é tão importante, mas é sem dúvida uma questão controversa.
- Queremos minimizar o espaço na tela que uma barra de rolagem pode ocupar. No Windows, as barras de rolagem, por padrão, são fixas e muito amplas.
- Queremos nos concentrar nas configurações do sistema. Se o usuário selecionar uma opção não padrão nas configurações que definem o comportamento das barras de rolagem, precisamos levar isso em consideração sempre que possível.
- Nós nos esforçamos para evitar o uso de soluções JavaScript pesadas (como o ótimo plugin OverlayScrollbars ), projetado para funcionar com barras de rolagem não corrigidas. Eles criam uma carga considerável nos computadores clientes.
Até onde posso ir com CSS?
Aqui está o código para o elemento container ao qual a classe de
overflowing-element está atribuída e também o código CSS para estilizá-la:
<div class="overflowing-element"></div> .overflowing-element { overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }
Se você precisar de barras de rolagem não corrigidas no Internet Explorer e no Edge com base no EdgeHTML, isso significa que a propriedade
-ms-overflow-style: -ms-autohiding-scrollbar; . Com o seu uso, tudo funcionará como deveria (é simples o suficiente - certo?).
Quando o iOS 13 foi lançado, a propriedade
-webkit-overflow-scrolling: touch pode não ser necessária para melhorar a física da rolagem. Embora, se você precisar oferecer suporte a versões mais antigas do iOS, é melhor não se recusar a usar essa propriedade.
Se falamos sobre propriedades CSS relacionadas à rolagem, pode ser útil ler sobre a propriedade
overscroll-behavior . Ele permite controlar o comportamento do sistema ao atingir a borda do elemento que suporta rolagem.
▍Firefox
O navegador Firefox suporta propriedades CSS sem prefixos. Essa é
a cor da barra de rolagem e a largura da barra de rolagem .
O exemplo a seguir usa variáveis CSS que não são suportadas no Internet Explorer 11 para maior clareza:
:root { --scrollbar-track-color: transparent; --scrollbar-color: rgba(0,0,0,.2); --scrollbar-width: thin; } .overflowing-element { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color); }
▍Chrome e Safari, navegador Edge baseado em Chromium e outros navegadores
Os navegadores Webkit e Blink suportam
pseudoelementos personalizados projetados para personalizar as barras de rolagem:
:root { --scrollbar-track-color: transparent; --scrollbar-color: rgba(0,0,0,.2); --scrollbar-size: .375rem; --scrollbar-minlength: 1.5rem; } .overflowing-element::-webkit-scrollbar { height: var(--scrollbar-size); width: var(--scrollbar-size); } .overflowing-element::-webkit-scrollbar-track { background-color: var(--scrollbar-track-color); } .overflowing-element::-webkit-scrollbar-thumb { background-color: var(--scrollbar-color); } .overflowing-element::-webkit-scrollbar-thumb:vertical { min-height: var(--scrollbar-minlength); } .overflowing-element::-webkit-scrollbar-thumb:horizontal { min-width: var(--scrollbar-minlength); }
Aqui está um exemplo no CodePen, demonstrando a capacidade de personalizar barras de rolagem, executadas exclusivamente por CSS. E
aqui está um exemplo que demonstra o comportamento padrão das barras de rolagem. Você pode compará-los.
Note-se que o código acima tem um problema. Consiste no fato de que, ao definir as propriedades
height ou
width do pseudoelemento
::-webkit-scrollbar no macOS, a
::-webkit-scrollbar de
::-webkit-scrollbar não fixa é substituída por uma fixa (as configurações padrão são redefinidas). No entanto, isso não é difícil de corrigir com um pequeno pedaço de código JavaScript.
CSS e um pouco de JS
Podemos adicionar uma pequena quantidade de código JavaScript ao projeto, o que nos permite descobrir se a barra de rolagem padrão está fixa ou não. Parece algo como isto:
var parent = document.createElement("div"); parent.setAttribute("style", "width:30px;height:30px;"); parent.classList.add('scrollbar-test'); var child = document.createElement("div"); child.setAttribute("style", "width:100%;height:40px"); parent.appendChild(child); document.body.appendChild(parent);
Se a barra de rolagem for fixa, adicionaremos a classe
layout-scrollbar-obtrusive ao elemento do documento do
body . Esta classe pode ser usada para ajustar as propriedades de
width e
height apenas de barras de rolagem fixas. Isso evita a interferência descrita acima no comportamento das barras de rolagem. Durante esta intervenção, as barras de rolagem mudam e o projeto se afasta das configurações do sistema feitas pelo usuário. Aqui está o estilo da
layout-scrollbar-obtrusive :
.layout-scrollbar-obtrusive .layout-scrollbar::-webkit-scrollbar { height: var(--scrollbar-size); width: var(--scrollbar-size); }
Aqui você pode encontrar um exemplo de aplicação de uma técnica que usa CSS e JavaScript juntos.
Aqui , para comparação, é um exemplo que demonstra o comportamento padrão de um sistema.
Resumo: uma revisão da solução para o problema
Em dispositivos com telas sensíveis ao toque que usam barras de rolagem não corrigidas (ou seja, em dispositivos iOS e Android), simplesmente usamos o comportamento padrão das barras de rolagem.
No macOS, temos a oportunidade de levar em consideração as configurações do sistema feitas pelo usuário. Isso significa que não alternamos inadvertidamente entre barras de rolagem fixas e não fixas. Aplicamos estilos apenas a barras de rolagem fixas que estão sempre visíveis. Isso nos permite alinhar a aparência das páginas com os requisitos de design do projeto.
No Windows, ou seja, nos navegadores Firefox e Chrome, não há barras de rolagem não corrigidas padrão, mas aqui, como em outros casos, podemos aplicar nossa abordagem, que utiliza exclusivamente recursos CSS. Devido ao fato de termos conseguido criar exemplos de uso de barras de rolagem personalizáveis com CSS, conseguimos chegar a um acordo com nossa equipe de design. Estabelecemos um compromisso e evitamos o uso de soluções JavaScript pesadas.
Aqui estão os projetos de demonstração, cuja essência foi descrita acima:
- Mostrando o comportamento padrão da barra de rolagem.
- Uma solução que usa apenas CSS. Todas as barras de rolagem são estilizadas.
- Uma solução que usa CSS e JavaScript. Apenas barras de rolagem fixas são estilizadas.
Caros leitores! Como você estiliza barras de rolagem em seus projetos?
