Scroll-snap-align - CSS-Tricks

Anonim

scroll-snap-alignfaz parte do módulo CSS Scroll Snap. O ajuste de rolagem refere-se a “travar” a 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 em um contêiner de ajuste de rolagem, 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.

scroll-snap-aligné uma propriedade necessária para um elemento de ajuste de rolagem em um contêiner de ajuste de rolagem. Para obter mais informações sobre contêineres de ajuste de rolagem, consulte a scroll-snap-typeentrada do almanaque. scroll-snap-aligninforma ao navegador que parte de um elemento deve estar alinhado quando um ponto de pressão é encontrado: Caso o elemento de pressão para o start, centerou enddo recipiente pai que contém a scroll-snap-typepropriedade?

Se você quiser que um elemento se encaixe no início desse elemento, atribua a ele um scroll-snap-alignvalor como este:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Sintaxe

scroll-snap-align: ( none | start | end | center )(1,2)

Você pode especificar até 2 valores para esta propriedade, representando o bloco e os eixos inline, respectivamente. Se você fornecer apenas 1 valor, esse valor será usado para ambos os eixos.

Valores

scroll-snap-align aceita os seguintes valores:

  • none desativa o ajuste de rolagem no elemento
  • start alinha o início do elemento com a porta de ajuste do contêiner de rolagem quando encaixado no lugar
  • end alinha a extremidade do elemento com o snapport do contêiner de rolagem quando encaixado no lugar
  • center alinha o centro do elemento com a porta de ajuste do contêiner de rolagem quando encaixado no lugar

Exemplo

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-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Recursos

  • Recomendação do candidato para CSS Scroll Snap W3C
  • Ajuste prático de rolagem CSS
  • Apresentando CSS Scroll Snap Points