Rolagem bem controlada com o ajuste de rolagem do CSS

Crie experiências de rolagem bem controladas declarando posições de ajuste de rolagem.

Robert Flack

Majid Valipour

O recurso de quebra de rolagem do CSS permite que desenvolvedores da Web criem experiências de rolagem bem controladas declarando posições de quebra de rolagem. Artigos paginados e carrosséis de imagens são dois exemplos comuns disso. O CSS Scroll Snap fornece uma API consistente e fácil de usar para criar esses padrões de UX conhecidos.

Contexto

O caso do ajuste de rolagem

Rolar a tela é uma forma comum e natural de interagir com o conteúdo na Web. É a forma nativa da plataforma de fornecer acesso a mais informações do que estão visíveis na tela de uma só vez, tornando-se especialmente vital em plataformas móveis com espaço de tela limitado. Não é surpresa que os autores da Web preferem cada vez mais organizar o conteúdo em listas planas roláveis em vez de hierarquias profundas.

A principal desvantagem do rolagem é a falta de precisão. Raramente uma rolagem fica alinhada a um parágrafo ou frase. Isso é ainda mais pronunciado para 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 da 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 completa devido à falta de primitivas de personalização de rolagem ou ao acesso à rolagem composta. O CSS Scroll Snap garante uma solução rápida, de alta fidelidade e fácil de usar que funciona de maneira consistente em todos os navegadores.

O CSS Scroll Snap permite que os autores da Web marquem cada contêiner de rolagem com limites para operações de rolagem que serão concluídas. Os navegadores escolhem a posição final mais adequada, dependendo dos detalhes da operação de rolagem, do layout e da visibilidade do contêiner de rolagem e dos detalhes das posições de ajuste, em seguida, animam suavemente para ela. Voltando ao nosso exemplo anterior, quando o usuário termina de rolar o carrossel, a imagem visível aparece no lugar. Não são necessários ajustes de rolagem pelo JavaScript.

Quebra de rolagem do CSS

A quebra 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 preferida após a conclusão da operação de rolagem.

Um contêiner de rolagem pode ser incluído no ajuste de rolagem usando a propriedade scroll-snap-type. Isso informa ao navegador que ele precisa considerar encaixar esse contêiner de rolagem nas posições de ajuste produzidas pelos descendentes. scroll-snap-type determina o eixo em que a rolagem ocorre: x, y ou both, e o grau de precisão do ajuste: mandatory, proximity. Vamos falar mais sobre isso mais tarde.

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 especificado. 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 snap do elemento. Da mesma forma, os alinhamentos end e center significam que a borda ou o centro do snap do contêiner de rolagem precisam ser alinhados com a borda 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 encaixa em cada imagem conforme você rola, podemos especificar o contêiner de rolagem para ter 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 são associadas a um elemento, o algoritmo de ajuste pode ser inteligente em relação a quando e como ele ajusta 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 a imagem completa. No entanto, a especificação exige implementações para detectar esse caso e permitir que o usuário role livremente dentro dessa imagem, apenas encaixando nas bordas.

Exemplo: uma página de 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 rolar verticalmente, por exemplo, uma página de produto típica. O 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 especificada, mas também fixa e chama a atenção para uma nova seção quando ela rola o suficiente.

Veja como isso pode ser feito:

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>

Margem e padding de rolagem

A página do produto tem um cabeçalho superior de posição fixa. O design também pedia que parte da seção de cima 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 alinhamentos de snap de rolagem. A propriedade define um inseto contra a caixa de padding do contêiner de rolagem. No nosso exemplo, um inseto 15vh adicional 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 ajustar a rolagem. Ao fazer a justificação, a borda inicial do elemento de destino da justificação fica alinhada com essa nova posição, deixando espaço acima.

A propriedade scroll-margin define a quantidade inicial usada para ajustar a caixa efetiva do alvo de ajuste de forma semelhante a como scroll-padding funciona no contêiner de rolagem de ajuste.

Talvez você tenha notado que essas duas propriedades não têm a palavra "snap". Isso é intencional, porque eles modificam a caixa para todas as operações de rolagem relevantes e não apenas a fixação de rolagem. Por exemplo, o Chrome os leva em consideração ao calcular o tamanho da página para operações de rolagem de paginação, como PageDown e PageUp, e também ao calcular a quantidade de rolagem para a operação Element.scrollIntoView().

Interação com outras APIs de rolagem

API de rolagem do DOM

O ajuste de rolagem acontece após todas as operações de rolagem, incluindo aquelas iniciadas por script. Quando você usa 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. Portanto, não é preciso que o script do usuário faça cálculos manuais para ajustá-los.

Rolagem suave

A rolagem suave controla o comportamento de uma operação de rolagem programática, enquanto a fixação de rolagem determina o destino. Como eles controlam aspectos ortogonais de rolagem, eles podem ser usados juntos e se complementar.

Comportamento de rolagem esticada

A API Overscroll behavior controla como a rolagem é encadeada em vários elementos e não é afetada pelo ajuste de rolagem.

Considerações e práticas recomendadas

Evite usar o ajuste obrigatório quando os elementos de destino estiverem muito separados. 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 detectar o recurso. Se necessário, use @supports ou CSS.supports para detectar o suporte ao CSS Scroll Snap. Evite usar scroll-snap-type, que também está presente na especificação descontinuada.

Detecção de recursos no 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 suponha 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 depois que a rolagem programática for concluída. 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 diminuir a lacuna entre as bibliotecas de plug-ins e o CSS. O trabalho futuro vai se concentrar em scroll-snap, incluindo:

1. Disponibilidade e compatibilidade da API em vários navegadores.
2. Trabalhar com novas APIs CSS, como scroll-start.
3. Trabalhe com novos eventos do JS, como snapChanged().