CSS scroll-margin-bottom property

src

Description

CSS scroll-margin-bottom property specifies the margin at the bottom side of the scroll item.

Please move the scrollbar to see the effect of margin.

Syntax

scroll-margin-bottom :+ve length

Property values

+ve length Default

There is no margin on the bottom side of the scroll item.

scroll-margin-bottom: 0px;

Try it

+ve length

100

It specifies the bottom edge margin of the scroll item.

In the demo, there is 100px margin at the bottom edge of the scroll item.

scroll-margin-bottom: 100px;

Try it

Applicable to

It applies to scroll containers.

Preview

Code

CSS

.page {
 width:278px;
 height:296px;
 border:2px solid yellow;
 scroll-snap-align: end none;
}
.docContainer {
  width: 300px;
  height:300px;
  border:2px solid red;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  scroll-snap-type:y mandatory;
}

HTML

<div class="docContainer">
<div class="page" style="background-color:lightgray;">Page 1</div>
<div class="page" style="background-color:green;">Page 2</div>
<div class="page" style="background-color:blue;">Page 3</div>
<div class="page" style="background-color:lightblue;">Page 4</div>
<div class="page" style="background-color:lightgreen;">Page 5</div>
<div class="page" style="background-color:lightblue;">Page 6</div>
</div>

CSS3 Properties

Description

Syntax

Property values

Applicable to