Proprietà CSS scroll-margin-block-start

Definizione e uso

scroll-margin-block-start L'attributo specifica la distanza tra la posizione di adesione nella direzione del blocco e il contenitore.

Questo significa che quando smetti di scorrere, lo scorrimento si adatta rapidamente e si ferma alla posizione di adesione tra l'elemento iniziale della direzione del blocco e la distanza specificata dal contenitore.

La direzione del blocco si riferisce alla posizione di posizionamento della riga successiva rispetto alla riga esistente, che è anche il modo di layout delle etichette con CSS display: block; (come i tag <p> e <div>) nella pagina. La direzione del blocco dipende dalla lingua di scrittura, ad esempio, il nuovo riga del mongolo è disposto da sinistra a destra, quindi la direzione del blocco è da sinistra a destra, mentre la direzione del blocco delle pagine inglesi è verso il basso. La direzione del blocco può essere definita tramite l'attributo CSS writing-mode 定义。

Definition.

The吸附位置 refers to the position where the child element is吸附到位 in the container when you stop scrolling.Note: scroll-snap-align This attribute only takes effect when the

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

CSS's scroll-margin-inline and scroll-margin-block attributes are similar to the CSS attributes Proprietà CSS scroll-margin-top,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.

Example

Example 1

Sets the scroll margin between the alignment position and the container 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

Technical Details

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Pagine correlate

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type

Riferimento:Proprietà CSS writing-mode