建工学院在2016年度陕西省高校土建专业优秀毕...

Baseline Widely available
百度 “假作真时真亦假，无为有处有还无”，有些人说话真真假假、虚虚实实，让人难以辨别，然而，却不能总是拿“难得糊涂”这一词来搪塞，很多时候，特别是涉及到重要事件时，我们需要知道对方语言背后的真相。

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

The scroll-margin-block shorthand property sets the scroll margins of an element in the block dimension.

Try it

scroll-margin-block: 0;

scroll-margin-block: 20px;

scroll-margin-block: 2em;

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll ?</div>
</section>

.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: #fff;
  color: rebeccapurple;
}

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

css
/* <length> values */
scroll-margin-block: 10px;
scroll-margin-block: 1em 0.5em;

/* Global values */
scroll-margin-block: inherit;
scroll-margin-block: initial;
scroll-margin-block: revert;
scroll-margin-block: revert-layer;
scroll-margin-block: unset;

Values

<length>

An outset from the corresponding edge of the scroll container.

Description

The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.

Formal definition

Initial valueas each of the properties of the shorthand:
Applies toall elements
Inheritedno
Computed valueas each of the properties of the shorthand:
Animation typeby computed value type

Formal syntax

scroll-margin-block = 
  <length>{1,2}

Specifications

Specification
CSS Scroll Snap Module Level 1
# propdef-scroll-margin-block

Browser compatibility

See also