Margem de rolagem - CSS-Tricks

Anonim

scroll-marginfaz 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-marginé 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.

Insira a margem de rolagem

scroll-marginé usado para ajustar a área de snap de um elemento (a caixa que define onde o elemento será ajustado). Adicionar scroll-marginé útil quando você precisa dar espaço a um elemento da borda do contêiner quando encaixado no lugar, mas permitindo situações em que cada elemento pode precisar de um espaçamento ligeiramente diferente. Se todos os elementos tiverem os mesmos requisitos de espaçamento, considere usar scroll-paddingno contêiner pai em vez de scroll-marginporque isso afeta o espaçamento de todos os elementos dentro do contêiner.

Um exemplo simples em que scroll-marginpermite um espaçamento de 50 px em torno da parte superior e esquerda de um elemento se parece com este:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
A área rosa representa o scroll-marginneste elemento.

Sintaxe

/* Shorthand */ scroll-margin: (1,4); /* Longhands */ scroll-margin-top: ; scroll-margin-right: ; scroll-margin-bottom: ; scroll-margin-left: ; /* inline-specific and block-specific properties as well */ scroll-margin-block: (1,2); scroll-margin-inline: (1,2);

Observação importante sobre longhands: o Chrome (e possivelmente outros navegadores) não suporta atualmente o formato longhand scroll-paddinge scroll-marginpropriedades. Use a abreviação para obter suporte máximo do navegador. Veja este problema no rastreador de bug do chromium para mais detalhes e o status atual.

Valores

scroll-marginaceita a sequência de um comprimento de valor, o qual é semelhante ao escrito margine outras propriedades em que o valor pode ser definido com unidades ( px, em, vh, etc.). Consulte o Módulo de Valores e Unidades do W3C para obter mais informações. As porcentagens não podem ser usadas de scroll-marginacordo com as especificações.

Exemplo

Veja o exemplo de preenchimento de rolagem da caneta
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-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Recursos

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