Web4College

CSS scroll-margin property

src

Description

CSS scroll-margin property specifies top, right, bottom, and left edges of the scroll snap area.


scroll snap area = the rectangular area (bounded by yellow border) of the item bounded by the scroll container (bounded by red border) + specified offset

Syntax

scroll-margin :scroll-margin-top    scroll-margin-right    scoll-margin-bottom    scroll-margin-left

Property values

+ve length Default

0

does not specify offset for any edge.

scroll-margin: 0;
Try it

+ve length

100

It specifies the top, right, bottom, and left edge offset of the scroll item.

In the demo, there is 100px offset at all the edges of the scroll snap area.

scroll-margin: 100px;
Try it

Applicable to

It applies to scroll containers.