Scroll-padding - CSS-Tricks

Anonim

scroll-paddingfaz 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-paddingé uma propriedade opcional para qualquer contêiner de ajuste de rolagem. Os contêineres de ajuste de rolagem são definidos sempre que a scroll-snap-typepropriedade é definida com qualquer valor além disso none. Para obter mais informações sobre contêineres de ajuste de rolagem, consulte a scroll-snap-typeentrada do almanaque.

OK, passando para o preenchimento de rolagem

scroll-paddingé usado para ajustar a região de visualização ideal do contêiner de encaixe. Isso é útil se o contêiner tiver elementos como um cabeçalho fixo que obscureceria os elementos internos ou se o contêiner rolável precisar de algum espaço para dar aos elementos internos espaço para respirar, uma vez que foram “encaixados” na posição.

Um exemplo simples seria usar scroll-paddingpara criar algum espaçamento fixo 50pxna parte superior e esquerda do contêiner:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
As áreas em rosa mostram o preenchimento de rolagem no contêiner de ajuste de rolagem.

Sintaxe

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

Observação importante sobre longhands: o Chrome atualmente não oferece suporte para 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-padding aceita os seguintes valores:

  • autodeixa o preenchimento a ser determinado pelo navegador / agente do usuário. Geralmente, isso significa um valor de 0 px, mas pode ser diferente de zero se o agente do usuário decidir que outro valor é mais apropriado.
  • é escrito para semelhantes paddinge outras propriedades em que o valor pode ser definido com unidades ( px, em, vh, etc.) ou como uma percentagem do próprio recipiente.

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