CSS scroll-margin property

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

does not specify offset for any edge.

scroll-margin: 0;

+ve length

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;

Applicable to

It applies to scroll containers.

From web4college, the free CSS digger

#CSS digger
Was this article helpful?

 
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
▾
×

Ctrl+D