Summary

  • O primeiro rascunho público do W3C, em 2015, usou um álbum de fotos para mostrar a parada desajeitada após uma rolagem imprecisa e propôs pontos em que o contêiner poderia repousar.
  • Os textos posteriores separaram a intensidade do encaixe, definida no contêiner, do alinhamento indicado pelos elementos. O navegador conduz o movimento e escolhe a posição final.

A editora organiza um ensaio fotográfico. Há uma ordem para as imagens, mas o leitor passa por elas com o polegar, não com uma régua. Ao soltar o dedo, a tela exibe um pedaço de cada foto. A editora poderia programar botões para mandar cada visitante avançar uma foto por vez. Os autores de Scroll Snap preferiram deixar o gesto como ele é e oferecer ao navegador alguns lugares em que a galeria faz sentido. É uma solução modesta para uma irritação que todo mundo reconhece na hora.

O primeiro rascunho público, de 26 de março de 2015, chamava-se CSS Scroll Snap Points. Sua introdução descrevia o álbum de fotos e o risco de uma página ficar cortada após gestos de toque ou roda do mouse. A proposta estabelecia deslocamentos nos quais a janela visível do contêiner poderia parar ao fim da rolagem. Com mandatory, ela deveria terminar em um ponto quando possível; com proximity, o agente de usuário avaliaria se valia aproximar a posição. O documento também tratava de pontos repetidos em um eixo e de pontos fornecidos por elementos. O site desenhava as vagas, o navegador estacionava.

As atas de dezembro de 2015 do grupo CSS mostram o ajuste de obra. Matt Rakow reunia as noções de área e alinhamento; o grupo trocou a antiga coordenada por scroll-snap-align e uma área, e o antigo destino por padding. Na reunião de San Francisco em maio de 2016, apareceram os quadros difíceis: imagem maior que a janela, posição fora da parte visível e área impossível de alcançar. Uma vaga perfeitamente desenhada não ajuda se o carro não cabe nela ou se fica do outro lado de uma parede.

No rascunho de 23 de junho de 2016, a lógica passou a ser descrita pelo alinhamento. O contêiner escolhia o comportamento com scroll-snap-type; uma foto marcava com scroll-snap-align como sua borda ou seu centro deveria encontrar a janela de referência. A editora poderia pedir a foto centralizada sem calcular velocidade de dedo ou posição quadro a quadro. O texto deixava a animação e a física exatas com o navegador. Um exemplo de página longa mostrava por que proximity importa: há ocasiões em que o leitor precisa parar entre seções; um encaixe obrigatório pode agir como guia que puxa o braço do visitante.

A Candidate Recommendation de 14 de agosto de 2018 detalhou as escolhas do contêiner e dos elementos com propriedades como scroll-snap-type, scroll-snap-align, scroll-padding e scroll-margin. Padding e margem ajustam a área útil do enquadramento, inclusive quando uma barra fixa ocupa parte da tela. A publicação escolhe a composição; não precisa construir um motor próprio para vigiar cada milímetro percorrido.

A Candidate Recommendation de 11 de março de 2021 manteve a arquitetura e descreveu a seleção de posições válidas. O leitor começa a rolagem. A folha de estilos indica os pontos. O navegador decide o repouso sob aquelas regras. Uma fila curta de fotos pode pedir uma parada firme; um texto longo pode precisar de mais liberdade para alguém reler uma frase no meio. mandatory e proximity mudam a experiência, não só o acabamento técnico.

O histórico de publicação do W3C liga os marcos de 2015, 2016, 2018 e 2021. O tema aqui é o ponto final de uma rolagem iniciada pela pessoa. A outra história, Scroll Anchoring, acompanha a posição do leitor quando conteúdo acima dele aparece tarde. Neste álbum, a editora dispõe as fotos, o leitor as percorre e o navegador evita estacionar atravessado em duas imagens.