A propriedade CSS scroll-padding-right

Definição e uso

scroll-padding-right a propriedade especifica a distância do lado direito do contêiner à posição de adesão do elemento filho.

a posição de adesão se refere à posição onde o elemento filho se adere ao contêiner ao parar de rolar.

a posição de adesão por scroll-snap-align propriedade de configuração, mas também pode ser afetada pela propriedade CSS direction e writing-mode impacto.

Atenção:此属性仅在吸附位置设置在子元素右侧时有效。

Essa propriedade é válida apenas quando a posição de adesão estiver configurada na direita do elemento filho. scroll-padding-right no elemento pai, e para ver o efeito scroll-snap-align Propriedade, e configure a propriedade scroll-padding-right e scroll-snap-type Propriedade.

Exemplo

Exemplo 1

Defina a margem interna de rolagem para uma distância de 20px da direita do contêiner para a posição de adesão:

div {
  scroll-padding-right: 20px;
}

Experimente você mesmo

Exemplo 2: Biblioteca de imagens

scroll-padding-right A propriedade pode ser usada em galerias de imagens com comportamento de adesão para empurrar as imagens para dentro da visão a partir do elemento fixo:

#container > img {
  scroll-padding-right: 30px;
}

Experimente você mesmo

Exemplo 3: Definindo a margem interna de rolagem na direita

Quando são configurados comportamentos de adesão em ambas as direções, também pode ser configurado no contêiner scroll-padding-right Propriedade. Role horizontalmente para o próximo elemento para ver o efeito:

#container > div {
  scroll-padding-right: 30px;
}

Experimente você mesmo

Exemplo 4: Posição de adesão

Para fazer scroll-padding-right A propriedade entra em vigor, e a posição de adesão deve ser configurada na direita do elemento filho. Neste exemplo,direction O valor da propriedade 'rtl' mudará a posição de adesão da direita para a esquerda do elemento filho. Quando usar esse código,scroll-padding-right A propriedade não terá mais efeito:

#container {
  direction: rtl;
  scroll-padding-right: 30px;
}
#container > div {
  scroll-snap-align: none end;
}

Experimente você mesmo

Sintaxe do CSS

scroll-padding-right: auto|value|initial|inherit;

Valor da propriedade

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta plenamente essa propriedade.

Páginas relacionadas

Referência:Atributo direction do CSS

Referência:A propriedade CSS scroll-snap-align

Referência:A propriedade CSS scroll-snap-type

Referência:A propriedade writing-mode do CSS