Crie experiências de rolagem bem controladas declarando posições de ajuste de rolagem.
O recurso ajuste de rolagem do CSS permite que desenvolvedores da Web criem experiências de rolagem bem controladas declarando posições de ajuste de rolagem. Artigos paginados e carrosséis de imagens são dois exemplos usados com frequência disso. O ajuste de rolagem do CSS oferece uma API fácil de usar e consistente para criar esses padrões de UX conhecidos.
Contexto
O caso do ajuste de rolagem
A rolagem é uma forma comum e natural de interagir com o conteúdo na Web. É o meio nativo da plataforma para fornecer acesso a mais informações do que as visíveis na tela de uma só vez, tornando-se especialmente vital em plataformas móveis com espaço de tela limitado. Por isso, não é surpresa que os autores da Web prefiram cada vez mais organizar o conteúdo em listas simples roláveis, em vez de hierarquias profundas.
A principal desvantagem da rolagem é a falta de precisão. Raramente uma rolagem termina alinhada a um parágrafo ou frase. Isso é ainda mais evidente em conteúdo paginado ou detalhado com limites significativos quando a rolagem termina no meio da página ou da imagem, deixando-a parcialmente visível. Esses casos de uso se beneficiam de uma experiência de rolagem bem controlada.
Os desenvolvedores web há muito tempo dependem de soluções baseadas em JavaScript para controlar a rolagem e ajudar a resolver essa deficiência. No entanto, as soluções baseadas em JavaScript não oferecem uma solução de fidelidade total devido à falta de primitivos de personalização de rolagem ou acesso à rolagem composta. O ajuste de rolagem CSS garante uma solução rápida, de alta fidelidade e fácil de usar que funciona de maneira consistente em todos os navegadores.
O ajuste de rolagem do CSS permite que os autores da Web marquem cada contêiner de rolagem com limites para as operações de rolagem que serão concluídas. Em seguida, os navegadores escolhem a posição final mais adequada, dependendo das particularidades da operação de rolagem, do layout e da visibilidade do contêiner de rolagem e dos detalhes das posições de ajuste, e fazem uma animação suave até ela. Voltando ao exemplo anterior, quando o usuário termina de rolar o carrossel, a imagem visível se ajusta ao lugar. Não é necessário fazer ajustes de rolagem com JavaScript.
Ajuste de rolagem CSS
O ajuste de rolagem é o ato de ajustar o deslocamento de rolagem de um contêiner de rolagem para que ele fique em uma posição de ajuste preferencial quando a operação de rolagem for concluída.
Um contêiner de rolagem pode ser ativado para o ajuste de rolagem usando a propriedade
scroll-snap-type. Isso informa ao navegador que ele deve considerar o ajuste desse contêiner de rolagem
às posições de ajuste produzidas pelos descendentes. scroll-snap-type
determina o eixo em que a rolagem ocorre: x, y ou both, e o
rigor do ajuste: mandatory, proximity. Vamos falar mais sobre isso depois.
Uma posição de ajuste pode ser produzida declarando um alinhamento desejado em um elemento.
Essa posição é o deslocamento de rolagem em que o contêiner de rolagem ancestral mais próximo e o elemento são alinhados conforme especificado para o eixo em questão. Os
seguintes alinhamentos são possíveis em cada eixo: start, end, center.
Um alinhamento start significa que a borda inicial do snapport do contêiner de rolagem precisa
ser alinhada com a borda inicial da área de ajuste do elemento. Da mesma forma, os alinhamentos end e
center significam que a borda final ou o centro do snapport do contêiner de rolagem
precisam ser alinhados com a borda final ou o centro da área de ajuste do elemento.
Os exemplos a seguir ilustram como usar esses conceitos.
Exemplo: uma galeria horizontal
Um caso de uso comum para o ajuste de rolagem é um carrossel de imagens. Por exemplo, para
criar um carrossel de imagens horizontal que se ajusta a cada imagem conforme você rola, podemos
especificar que o contêiner de rolagem tenha um scroll-snap-type
obrigatório no eixo horizontal.
Defina cada imagem como scroll-snap-align: center para garantir que
o ajuste centralize a imagem no carrossel.
#gallery {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
#gallery img {
scroll-snap-align: center;
}
<div id="gallery">
<img src="cat.jpg">
<img src="dog.jpg">
<img src="another_cute_animal.jpg">
</div>
Como as posições de ajuste estão associadas a um elemento, o algoritmo de ajuste pode ser inteligente sobre quando e como ele se ajusta, considerando o elemento e o tamanho do contêiner de rolagem. Por exemplo, considere o caso em que uma imagem é maior que o carrossel. Um algoritmo de ajuste simples pode impedir que o usuário mova a imagem para ver todos os detalhes. No entanto, a especificação exige que as implementações detectem esse caso e permitam que o usuário role livremente pela imagem, ajustando apenas as bordas.
Exemplo: uma página do produto com jornada
Outro caso comum que pode se beneficiar do ajuste de rolagem são páginas com
várias seções lógicas para rolagem vertical, por exemplo, uma página de produto
típica. scroll-snap-type: y proximity; é mais adequado para casos
como esse. Ele não interfere quando um usuário rola até o meio de uma seção específica, mas também se ajusta e chama a atenção para uma nova seção quando o usuário rola para perto o suficiente.
Veja como fazer isso:
article {
scroll-snap-type: y proximity;
/* Reserve space for header plus some extra space for sneak peeking. */
scroll-padding-top: 15vh;
overflow-y: scroll;
}
section {
/* Snap align start. */
scroll-snap-align: start;
}
header {
position: fixed;
height: 10vh;
}
<article>
<header> Header </header>
<section> Section One </section>
<section> Section Two </section>
<section> Section Three </section>
</article>
Padding e margem de rolagem
A página do produto tem um cabeçalho superior de posição fixa. O design também exigia que parte da seção superior permanecesse visível quando o contêiner de rolagem fosse fixado para fornecer uma dica de design aos usuários sobre o conteúdo acima.
A propriedade scroll-padding
é uma nova propriedade CSS que pode ser usada para ajustar a região visível
efetiva do contêiner de rolagem ou snapport, que
é usada ao calcular os alinhamentos de ajuste de rolagem. A propriedade define um encarte
em relação à caixa de padding do contêiner de rolagem. No nosso exemplo, um encarte adicional de 15vh
foi adicionado à parte de cima, o que instrui o navegador a considerar uma posição mais baixa,
15vh abaixo da borda superior do contêiner de rolagem, como a borda inicial vertical para
o ajuste de rolagem. Ao ajustar, a borda inicial do elemento de destino do ajuste vai ficar alinhada com essa nova posição, deixando espaço acima.
A propriedade scroll-margin
define o valor inicial usado para ajustar a caixa efetiva do destino de ajuste,
semelhante ao funcionamento de scroll-padding no contêiner de rolagem
de ajuste.
Talvez você tenha notado que essas duas propriedades não têm a palavra "snap"
nelas. Isso é intencional, já que eles modificam a caixa para todas as operações de rolagem relevantes e não apenas para o ajuste de rolagem. Por exemplo, o Chrome as considera
ao calcular o tamanho da página para operações de rolagem de paginação, como
PageDown e PageUp, e também ao calcular o valor de rolagem para a
operação Element.scrollIntoView().
Interação com outras APIs de rolagem
API DOM Scrolling
O ajuste de rolagem acontece depois de todas as operações de rolagem, incluindo aquelas
iniciadas por script. Ao usar APIs como Element.scrollTo, o
navegador calcula a posição de rolagem pretendida da operação e aplica
a lógica de ajuste adequada para encontrar o local final ajustado. Assim, não é
necessário que o script do usuário faça cálculos manuais para o ajuste.
Rolagem suave
A rolagem suave controla o comportamento de uma operação de rolagem programática, enquanto o ajuste de rolagem determina o destino. Como eles controlam aspectos ortogonais da rolagem, podem ser usados juntos e se complementam.
Comportamento de rolagem esticada
A API de comportamento de rolagem esticada controla como a rolagem é encadeada em vários elementos e não é afetada pelo ajuste de rolagem.
Advertências e práticas recomendadas
Evite usar o ajuste obrigatório quando os elementos de destino estiverem muito distantes. Isso pode fazer com que o conteúdo entre as posições de ajuste fique inacessível.
Em muitos casos, o ajuste de rolagem pode ser adicionado como uma melhoria
sem precisar de detecção de recursos.
Se necessário, use @supports ou CSS.supports para detectar a compatibilidade com o ajuste de rolagem do CSS.
Evite usar scroll-snap-type, que também está presente na especificação descontinuada.
Detecção de recursos em CSS
@supports (scroll-snap-align: start) {
article {
scroll-snap-type: y proximity;
scroll-padding-top: 15vh;
overflow-y: scroll;
}
}
Detecção de recursos em JavaScript
if (CSS.supports('scroll-snap-align: start')) {
// use css scroll snap
} else {
// use fallback
}
Não presuma que as APIs de rolagem programática, como Element.scrollTo,
sempre terminam no deslocamento de rolagem solicitado. O ajuste de rolagem pode ajustar o
deslocamento de rolagem após a conclusão da rolagem programática. Essa não era uma
boa suposição mesmo antes do ajuste de rolagem, já que a rolagem pode ter sido
interrompida por outros motivos, mas é especialmente o caso com o ajuste
de rolagem.
Trabalhos futuros
A experiência de rolagem foi o foco de
uma pesquisa recente da equipe do Chrome.
Os resultados da pesquisa identificaram várias áreas que precisam de mais trabalho
para reduzir a diferença entre as bibliotecas de plug-ins e o CSS.
O trabalho futuro vai se concentrar em scroll-snap, incluindo:
- Disponibilidade e compatibilidade da API em navegadores.
- Trabalhe em
novas APIs CSS, como
scroll-start. - Trabalhar em
novos eventos JS, como
snapChanged().