Margen de desplazamiento - Trucos CSS

Anonim

scroll-margines 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-margines una propiedad opcional para un elemento de ajuste de desplazamiento dentro de un contenedor de ajuste de desplazamiento. Para obtener más información sobre contenedores de desplazamiento, consulte la scroll-snap-typeentrada del almanaque.

Ingrese margen de desplazamiento

scroll-marginse utiliza para ajustar el área de ajuste de un elemento (el cuadro que define dónde se ajustará el elemento). Agregar scroll-margines útil cuando necesita dar espacio a un elemento desde el borde del contenedor cuando se coloca en su lugar, pero teniendo en cuenta situaciones en las que cada elemento puede necesitar un espacio ligeramente diferente. Si todos los elementos tienen los mismos requisitos de espaciado, considere usarlos scroll-paddingen el contenedor principal en lugar de scroll-marginporque eso afecta el espaciado de todos los elementos dentro del contenedor.

Un ejemplo simple en el que scroll-marginpermite un espacio de 50px alrededor de la parte superior e izquierda de un elemento se ve así:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
El área rosa representa el scroll-marginde este elemento.

Sintaxis

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

Nota importante sobre las manos largas: Chrome (y posiblemente otros navegadores) no admiten 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-marginAcepta los siguientes una longitud de valor, que está escrito similar a marginy otras propiedades donde el valor se puede definir con unidades ( px, em, vh, etc). Consulte el Módulo de valores y unidades del W3C para obtener más información. No se pueden utilizar porcentajes scroll-marginsegún la especificación.

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