A scroll-snap-typepropriedade faz parte do Módulo CSS Scroll Snap. O ajuste de rolagem se refere ao "bloqueio" da posição da janela de visualização para elementos específicos na página conforme a janela (ou um contêiner rolável) é rolada. Pense nisso como colocar um ímã no topo de um elemento que gruda no topo da janela de visualização e força a página a parar de rolar ali mesmo.
Isso é útil se você deseja parar o navegador em pontos específicos da página. Por exemplo: Um usuário que está navegando em uma galeria de fotos provavelmente não deseja rolar até a metade de uma imagem - ele provavelmente prefere que a imagem "estale" para a posição correta ao rolar. O ajuste de rolagem oferece aos desenvolvedores uma maneira pura de CSS para lidar com esse comportamento.
scroll-snap-typeé uma propriedade necessária em qualquer contêiner rolável ao qual deseja adicionar ajuste de rolagem. Ele responde a três perguntas para um contêiner de rolagem:
- O contêiner usa ajuste de rolagem?
- Em qual eixo - x (horizontal), y (vertical), bloco ou embutido - o ajuste de rolagem deve ser aplicado?
- Como o ajuste de rolagem deve se comportar? É forçado 100% do tempo ou só tem efeito quando o usuário fica “perto o suficiente” de uma posição de encaixe? Mais sobre isso mais tarde.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )Sintaxe
scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )Valores
scroll-snap-type aceita os seguintes valores:
nonedesativa o ajuste de rolagem.xpermite o ajuste de rolagem somente ao longo do eixo x.ypermite o ajuste de rolagem somente ao longo do eixo y.blockpermite o ajuste de rolagem somente ao longo do eixo do bloco.inlinepermite o ajuste de rolagem somente ao longo do eixo embutido.bothpermite o ajuste de rolagem ao longo de ambos os eixos (que você pode definir comoxey, ouinlineeblock.mandatoryé um valor de rigidez que informa ao navegador para sempre ir para uma posição de ajuste quando não houver rolagem acontecendo.proximityé um valor de rigidez que diz ao navegador para ir para uma posição de ajuste se uma ação de rolagem ficar muito perto de uma posição de ajuste. Se não estiver muito próximo, o navegador não deve se encaixar e a rolagem se comportará normalmente.
Exemplo
Veja o exemplo do tipo scroll-snap-type Pen
por CSS-Tricks (@ css-tricks) no CodePen.
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 69 | 68 | 11 * | 79 | 11 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11,0-11,2 |
Relacionado
scroll-paddingscroll-marginscroll-snap-alignscroll-snap-stop
Recursos
- Recomendação do candidato para CSS Scroll Snap W3C
- Ajuste prático de rolagem CSS
- Apresentando CSS Scroll Snap Points