Summary

  • Um painel interno pode chegar à borda e passar o restante da rolagem para a página que o contém. O usuário continua sobre o chat, mas vê a matéria inteira fugir.
  • contain segura a passagem para fora e preserva uma possível reação visual na borda. none também apaga essa reação. A diferença permite desenhar um limite sem transformar cada gesto em uma negociação com JavaScript.

Há uma notícia longa na tela e, sobre ela, uma conversa. O leitor procura a última resposta, gira a roda do mouse mais uma vez e de repente perde o parágrafo que estava atrás do chat. Segundo o rascunho do W3C de 2019, os dois painéis participam de uma cadeia de rolagem. Quando o painel de dentro alcança sua borda, o navegador pode encaminhar o movimento ao ancestral. Tecnicamente é uma transferência. Para quem lê, parece que o chão da conversa abriu um alçapão.

Um site podia vigiar eventos de toque e roda e chamar preventDefault() quando a janela chegasse ao fim. O rascunho explica por que esse guarda de fronteira trabalha mal. Um listener não passivo faz o navegador esperar o script antes de rolar, aumentando a latência. Cancelar o evento pode impedir inclusive o movimento normal até a borda. E a borda talvez tenha duas respostas: uma pequena elasticidade dentro do chat e a propagação para a página. É perfeitamente razoável querer a primeira e rejeitar a segunda. O comando antigo tratava as duas como bagagem do mesmo passageiro.

As atas de dezembro de 2016 registram a pergunta antes de existir o nome definitivo. A proposta, scroll-boundary-behavior, retomava o antigo -ms-scroll-chaining. Tab Atkins descreveu o dilema ao chegar ao topo ou ao fundo: a intenção de rolar escapa ou fica presa? Simon Fraser lembrou que alguns navegadores mantêm o mesmo alvo durante um gesto e levantou a preocupação de páginas aprisionarem usuários. Um chat que terminou suas mensagens entrou na conversa como exemplo concreto. O grupo gostou da direção, mas pediu nomes melhores e mais trabalho antes de fechar a decisão.

Em janeiro de 2018, Majid Valipour sugeriu levar a proposta incubada no WICG para os rascunhos do CSS Working Group. O registro menciona o estado de implementação daquele momento. A mudança mais duradoura foi outra: um jeito de remendar um widget passou a ser uma regra pública sobre a relação entre a área interna, a página e o navegador. O autor especifica uma fronteira; não precisa dirigir a física do movimento.

O histórico de publicações do W3C aponta 6 de junho de 2019 como data do primeiro rascunho público. A especificação separa ações locais de ações que saem do painel. Um brilho ou balanço ao chegar ao fim é local; mover o contêiner pai ou disparar navegação não é. auto deixa o comportamento habitual. contain barra as ações externas e ainda admite o aviso local. none barra ambos. Num chat, conservar um discreto “acabou aqui” faz sentido. Num feed infinito que carrega mais conteúdo, suprimir o balanço talvez faça mais sentido. A escolha mexe com a leitura, não apenas com a folha de estilos.

Outra pergunta apareceu na reunião de Berlim, em abril de 2018: e se o rumo da escrita não coincidir com os eixos físicos x e y? O grupo aprovou as variantes block e inline, associadas ao fluxo lógico do texto. Esse detalhe impede que uma regra de fronteira seja concebida como se toda página tivesse a mesma orientação. Num produto escrito de origem em dez idiomas, isso deixa de parecer detalhe muito rápido.

O rascunho ainda põe lado a lado uma navegação lateral fixa, um gesto de atualizar puxando a página e uma lista sem fim. Cada um pede uma resposta diferente ao tocar o limite. O chat desta história só queria impedir que a notícia saísse andando enquanto o leitor chegava à última mensagem. Agora pode fazer isso sem fingir que o dedo parou de existir.