Scroll-snap-stop - CSS-Tricks

Anonim

scroll-snap-stopfaz 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-stopé uma propriedade opcional 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-stoppermite que você force o contêiner de ajuste de rolagem a se encaixar em um elemento específico. Suponha que você esteja rolando dentro de um contêiner de ajuste de rolagem e dê a ele um giro gigante da roda do mouse. Normalmente, o navegador deixaria a velocidade de sua rolagem voar além dos pontos de ajuste até que se fixasse em um ponto de ajuste perto de onde a rolagem normalmente terminaria. Ao definir, scroll-snap-stopvocê pode dizer ao navegador que ele deve parar em um elemento específico antes de permitir que o usuário o passe.

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

Sintaxe

scroll-snap-stop: normal | always;

Valores

scroll-snap-stop aceita os seguintes valores:

  • normal é o valor padrão e permite que um elemento passe sem se ajustar
  • always forçará o navegador a se ajustar a este elemento, mesmo se a rolagem normalmente passasse por este elemento

Exemplo

Veja o exemplo da caneta scroll-snap-stop
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

Observe que o Chrome pode não ser compatível scroll-snap-stop: always;no momento.

Relacionado

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Recursos

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