Use scrollbar-gutter: stable no elemento que rola quando a entrada de uma barra clássica desloca colunas, rótulos ou botões. Reserve espaço dos dois lados com stable both-edges quando o centro visual for mais importante que a largura disponível. Em sistemas que desenham a barra por cima do conteúdo, esses valores preservam a largura original. A escolha depende do que a pessoa precisa reencontrar depois que o painel muda de tamanho.
Imagine um catálogo de amostras tipográficas. Uma lista de famílias aparece à esquerda e a prévia da família escolhida fica à direita. Ao filtrar, a lista passa de quatro itens para vinte. No computador com barras clássicas, os nomes perdem alguns pixels, o botão de detalhes se move e uma família longa passa a ocupar duas linhas. A pessoa que ajusta o filtro percebe três mudanças onde esperava apenas ver outros resultados. Fixar a largura útil da lista reduz esse movimento sem interferir no gesto de rolar.
Onde aplicar a reserva
Identifique a caixa cuja altura é limitada e cujo conteúdo precisa continuar disponível. Em uma grade, essa caixa pode ser um painel dentro de uma célula. Em uma página longa, pode ser a própria janela. Comece aumentando a lista até aparecer a barra e inspecione o elemento que efetivamente rola. Aplicar a propriedade no cartão externo deixa intacta uma caixa interna que tenha a sua própria rolagem. Se o objetivo é estabilizar a janela, a especificação trata a configuração na raiz como um caso próprio. CSS Overflow, seção sobre a reserva da barra de rolagem.
Para uma lista independente, experimente uma caixa com altura máxima, overflow: auto e scrollbar-gutter: stable. Mantenha nessa caixa o fundo que deve preencher a faixa reservada. Posicione a borda no invólucro se a intenção for desenhar um contorno contínuo em volta do cabeçalho e da lista. Compare o estado curto com o longo na mesma largura. A última coluna e os pontos de quebra dos nomes devem coincidir quando o sistema usa barras clássicas.
Em uma lista de navegação simples, deixar a página inteira rolar pode ser mais confortável. Uma região interna vale a pena quando preservar a prévia ou outros controles à vista ajuda a tarefa. Se você mantiver duas regiões, experimente rolar com a roda, arrastar com toque e percorrer os controles com o teclado. Use um cabeçalho identificável para cada região. Quando um painel termina, o usuário deve conseguir continuar pela página sem precisar descobrir uma sequência especial de movimentos. Esse teste começa antes de decidir a aparência da barra. Rolagem em protótipos no Figma.
Quando reservar espaço nas duas bordas
Escolha uma borda para conteúdo alinhado ao começo da linha. Na lista de amostras, os nomes compartilham o mesmo eixo do título. Se a barra ficar do outro lado, reservar apenas a faixa necessária preserva esse eixo e deixa mais espaço para o nome. Teste também uma interface em que a direção de leitura é invertida, se o projeto atender a esse cenário. A barra acompanha as decisões do navegador e do sistema, enquanto o alinhamento do texto pode seguir o início lógico da linha.
Use as duas bordas quando a caixa tem um centro que precisa coincidir com outro elemento. Uma lista de miniaturas pode ficar sob o título de uma coleção centralizada. Com uma faixa de um lado, o centro do conteúdo se afasta do centro do invólucro. O modificador cria uma faixa correspondente do lado oposto quando haveria uma reserva. Compare a diferença com a largura perdida. Se as miniaturas passarem a caber em três colunas onde antes cabiam quatro, vale centralizar o título no mesmo contêiner da lista ou mudar a grade. Referência de scrollbar-gutter no MDN.
Em painéis vizinhos, use o mesmo critério de reserva quando as colunas precisarem parecer alinhadas. Imagine uma comparação de famílias em que o painel da esquerda tem exemplos adicionais e o da direita tem apenas três. Com barras clássicas, a região que rola perde largura. Aplique a reserva aos dois contêineres e revise os rótulos nos dois lados. Se houver cabeçalhos fixos fora dos contêineres, faça um teste com uma linha longa que alcança a borda. O título da coluna precisa compartilhar a largura efetiva do conteúdo. Em layouts de cartões, o alinhamento vertical entre título, corpo e ação pede uma decisão adicional de grade. Subgrid para alinhar cartões com textos de tamanhos diferentes.
Como testar barras clássicas e sobrepostas
Abra o mesmo protótipo em um ambiente que mostre barras clássicas e outro que use barras sobrepostas. Capture a lista curta e a longa em cada um. No primeiro, verifique se a coluna mantém a mesma largura dentro de cada par de estados. No segundo, role e confira se a barra temporária cobre um controle junto à borda. Se cobrir, use espaçamento interno suficiente para separar os alvos da extremidade. Esse espaçamento pertence ao componente, inclusive quando o indicador de rolagem desaparece.
Faça uma segunda rodada com janela estreita, zoom ampliado e nomes maiores que os do protótipo inicial. Preste atenção ao primeiro ponto em que um nome quebra e empurra o botão para baixo. Se a ação é necessária em todos os itens, mantenha um espaço próprio para ela e permita que o nome quebre. Caso contrário, a pessoa terá de procurar a ação em posições diferentes ao percorrer a lista. Observe também o contorno de foco do último controle da linha. Ele deve aparecer inteiro no limite visível do painel.
Inclua na revisão a passagem de uma lista cheia para uma lista vazia. A mensagem de estado vazio pode ser centralizada quando a comparação entre colunas for irrelevante. Se ela aparece embaixo dos mesmos filtros e cabeçalhos, verifique sua posição no mesmo eixo da primeira linha. As duas escolhas comunicam estruturas diferentes. No primeiro caso, a mensagem ocupa toda a região. No segundo, ela toma o lugar dos resultados e ajuda a localizar onde os itens voltam a aparecer quando o filtro é removido.
O que fazer quando o painel ainda muda de largura
Meça separadamente a largura do invólucro e a largura disponível para o conteúdo. Se o invólucro varia, examine a regra de tamanho da grade ou do flex. Uma coluna com mínimo baseado no conteúdo pode reagir a um nome comprido mesmo com a reserva funcionando. Teste com os mesmos itens e apenas mude a altura da caixa. Depois mantenha a altura e substitua um item curto por um longo. Essa ordem separa a mudança causada pela barra da mudança provocada pelo texto.
Registre qual eixo a equipe quer preservar, quais sistemas foram usados e em que largura o painel passa para uma coluna. Guarde duas capturas com o filtro aberto e o mesmo rótulo selecionado. A revisão pode então comparar a posição do rótulo, do botão e do foco entre estados. Se o rótulo continua no mesmo eixo e os controles permanecem acessíveis, a reserva cumpriu a função mesmo quando a largura da faixa difere entre computadores.
Num protótipo compartilhado, inclua um controle que permita adicionar itens até ultrapassar o limite de altura. Isso torna a passagem reproduzível durante a revisão e ajuda a perceber um caso fácil de perder em capturas estáticas. Repita o teste no ponto em que a lista tem exatamente a altura da área visível, pois uma quebra adicional de linha pode ser suficiente para ativar a barra.