Relleno de desplazamiento - Trucos CSS

Anonim

scroll-paddinges parte del módulo CSS Scroll Snap. El ajuste de desplazamiento se refiere a "bloquear" la posición de la ventana gráfica en elementos específicos de la página a medida que se desplaza la ventana (o un contenedor desplazable). Piense en un contenedor de desplazamiento de desplazamiento como poner un imán encima de un elemento que se adhiere a la parte superior de la ventana gráfica y obliga a la página a dejar de desplazarse allí mismo.

scroll-paddinges una propiedad opcional para cualquier contenedor de ajuste de desplazamiento. Los contenedores de scroll-snap-typeajuste de desplazamiento se definen siempre que la propiedad se establece en cualquier valor además none. Para obtener más información sobre contenedores de desplazamiento, consulte la scroll-snap-typeentrada del almanaque.

Bien, pasando al relleno de desplazamiento

scroll-paddingse utiliza para ajustar la región de visualización óptima del contenedor de ajuste. Esto es útil si el contenedor tiene elementos como un encabezado fijo que oscurecería elementos en el interior o si el contenedor desplazable necesita algo de espacio para dar espacio a los elementos interiores para respirar una vez que se han "encajado" en su posición.

Un ejemplo simple sería usar scroll-paddingpara crear un espacio fijo 50pxen la parte superior e izquierda del contenedor:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Las áreas en rosa muestran el relleno de desplazamiento en el contenedor de ajuste de desplazamiento.

Sintaxis

/* 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);

Nota importante sobre las manos largas: Chrome no admite actualmente el formato scroll-paddingy las scroll-marginpropiedades de mano larga . Utilice la abreviatura para obtener la máxima compatibilidad con el navegador. Consulte este problema en el rastreador de errores de cromo para obtener más detalles y el estado actual.

Valores

scroll-padding acepta los siguientes valores:

  • autodeja el relleno a ser determinado por el navegador / agente de usuario. Generalmente, esto significa un valor de 0px, pero puede ser distinto de cero si el usuario-agente decide que otro valor es más apropiado.
  • se escribe en similares paddingy otras propiedades donde el valor se puede definir con unidades ( px, em, vh, etc.) o como un porcentaje del propio recipiente.

Ejemplo

Vea el ejemplo de relleno de desplazamiento de lápiz
de CSS-Tricks (@ css-tricks) en CodePen.

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
69 68 11 * 79 11

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 81 11.0-11.2

Relacionado

  • scroll-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Recursos

  • Recomendación de candidato de CSS Scroll Snap W3C
  • Ajuste de desplazamiento de CSS práctico
  • Presentamos CSS Scroll Snap Points