Atributo scroll-margin de CSS

Definición y uso

scroll-margin Este atributo especifica la distancia entre la posición de adhesión y el contenedor.

Esto significa que cuando detienes el desplazamiento, la barra de desplazamiento se ajusta rápidamente y se detiene a la distancia especificada entre la posición de adhesión y el contenedor.

La posición de adhesión se refiere a la posición en la que el elemento hijo se adhiere en el contenedor cuando se detiene el desplazamiento.

scroll-margin Este atributo es una abreviatura de los siguientes atributos:

scroll-margin Los valores del atributo se pueden configurar de diferentes maneras:

Si el atributo scroll-margin tiene cuatro valores:

scroll-margin: 15px 30px 60px 90px;
  • La distancia superior es de 15px
  • La distancia derecha es de 30px
  • La distancia inferior es de 60px
  • La distancia izquierda es de 90px

Si el atributo scroll-margin tiene tres valores:

scroll-margin: 15px 30px 60px;
  • La distancia superior es de 15px
  • Las distancias laterales son de 30px
  • La distancia inferior es de 60px

Si el atributo scroll-margin tiene dos valores:

scroll-margin: 15px 30px;
  • Las distancias superior e inferior son de 15px
  • Las distancias laterales son de 30px

Si el atributo scroll-margin tiene un valor:

scroll-margin: 10px;
  • Las distancias en las cuatro direcciones son de 10px

Para ver scroll-margin El efecto de los atributos debe establecerse en el elemento hijo scroll-margin y scroll-snap-align Atributo, y se establece en el elemento padre scroll-snap-type Atributo.

Nota:En el siguiente ejemplo, se han establecido los márgenes externos de desplazamiento en todos los lados, pero debido a scroll-snap-align El atributo se ha establecido en "start", por lo que solo ha cambiado el margen externo superior el comportamiento de desplazamiento.

Ejemplo

Ejemplo 1

Establezca el margen externo de desplazamiento entre la posición de adhesión y el contenedor en 20px:

div {
  scroll-margin: 20px;
}

Pruebe usted mismo

Ejemplo 2: Biblioteca de imágenes

scroll-margin Este atributo se puede usar en bibliotecas de imágenes con comportamiento de adhesión. Aquí,scroll-margin Permita que el usuario vea que hay otra imagen a la izquierda. Al desplazarse sobre la primera imagen, se puede ver el efecto:

#container > img {
  scroll-margin: 0 0 0 30px;
}
Pekín Bailarín Wuhan Tulipa Hangzhou

Pruebe usted mismo

Ejemplo 3: Establecer el margen externo de desplazamiento inferior y derecho

Se puede establecer en la parte inferior y derecha del elemento. scroll-margin Atributo. Al desplazarse horizontal y verticalmente al siguiente elemento, se puede ver el efecto:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





Pruebe usted mismo

Sintaxis de CSS

scroll-margin: 0|value|initial|inherit;

Valor del atributo

Valor Descripción
0 Margen externo de desplazamiento cero. Valor predeterminado.
longitud

Especifique el margen externo de desplazamiento con unidades como px, pt, cm, etc. Se permiten valores negativos.

Vea:Unidades CSS.
initial Establezca este atributo en su valor predeterminado. Vea initial.
inherit Hereda este atributo del elemento padre. Vea inherit.

Detalles técnicos

Valor predeterminado: 0
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.scrollMargin="20px"

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente esta propiedad por primera vez.

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

Páginas relacionadas

Referencia:Atributo CSS scroll-margin-bottom

Referencia:Atributo CSS scroll-margin-left

Referencia:Atributo CSS scroll-margin-right

Referencia:Atributo CSS scroll-margin-top

Referencia:Atributo CSS scroll-snap-align

Referencia:Atributo CSS scroll-snap-type