CSS scroll-margin-block-start eigenschap

Definitie en gebruik

scroll-margin-block-start De eigenschap specificeert de afstand tussen de aangehechte positie in de blokdirection en de container.

Dit betekent dat wanneer je het scrollen stopt, het scrollen snel wordt aangepast en stopt op de locatie van de aangehechte positie van de subelementen in de blokdirection ten opzichte van de container op de gespecificeerde afstand.

De blokdirection verwijst naar de richting waarin de volgende regel ten opzichte van de huidige regel wordt geplaatst, wat ook de layoutmethode van tags met CSS display: block; (zoals <p> en <div>-tags) op de pagina is. De blokdirection hangt af van de schrijftaal, bijvoorbeeld is de nieuwe regel in Mongools van links naar rechts geplaatst, dus de blokdirection is van links naar rechts, terwijl de blokdirection van een Engelse pagina naar beneden is. De blokdirection kan worden vastgesteld via de CSS-eigenschap writing-mode Definition.

The吸附位置 refers to the position where the child element吸附 in the container when you stop scrolling.

Note:This attribute only takes effect in the block direction scroll-snap-align the attribute is set to 'start' it takes effect.

see scroll-margin-block-start attribute effects on the parent element, must be set on the child element to scroll-margin-block-start and scroll-snap-align attribute, and set scroll-snap-type attribute.

CSS's scroll-margin-inline and scroll-margin-block attributes are similar to the CSS attribute CSS scroll-margin-top eigenschap,scroll-margin-bottom,scroll-margin-left and scroll-margin-right are very similar, but scroll-margin-block and scroll-margin-inline The attribute depends on the block direction and inline direction.

Instance

Example 1

Sets the alignment position between the container and the scroll margin in the block direction to 20px:

div {
  scroll-margin-block-start: 20px;
}

Try It Yourself

Example 2

When the <div> element's writing-mode When the attribute value is set to vertical-rl, the block direction is from right to left. The result is that the starting part of the element moves to the right from the top:

div {
  scroll-margin-block-start: 50px;
  writing-mode: vertical-rl;
}

Try It Yourself

CSS Syntax

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

Attribute Value

Value Description
0 Default. The default scroll-margin distance of the element.
length

Specifies a distance in units such as px, pt, cm. Negative values are allowed.

See:CSS Eenheid.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: 0
Inheritance: No
Animation Production: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.scrollMarginBlockStart="20px"

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Gerelateerde pagina's

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap