Open In App

CSS scroll-margin-bottom Property

Last Updated : 29 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

The scroll-margin-bottom property is used to set all the scroll margins to the bottom of an element at once. The value specified for the scroll-margin-bottom determines how much of the page that is primarily outside the support should remain visible.

Hence, the scroll-margin-bottom values represent outsets that define the scroll snap area that is used for snapping this box to the snap port. 

Syntax:

scroll-margin-bottom: length

/* Or */

scroll-margin-bottom: Global_Values

Property values: This property accepts two-properties mentioned above and described below:

  • length: This property refers to the values defined with length units: px, rem, em, vh, etc.
  • Global_Values: This property refers to the global values like initial, inherit, unset, etc.

 Note: scroll-margin-bottom doesn’t accept percentage value as the length. 

Example: In this example, you can see the effect of scroll-margin-bottom by scrolling to a point partway between two of the “interfaces” of the example’s content.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        .scroller {
              width: 300px;
              height:300px;
              overflow-x: hidden;
              overflow-y: auto;
              scroll-snap-type:y mandatory;
        }
 
        .scroller > div {
              width: 300px;
              height: 300px;
              font-size: 50px;
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
              scroll-snap-align: end none;
        }
 
        .scroller div:nth-child(odd){
              background-color: green;
              scroll-margin-bottom: 1rem;
        }
        .scroller div:nth-child(even){
              background-color: rgb(160, 231, 45);
              scroll-margin-bottom: 3rem;
        }
    </style>
</head>
<body>
    <div class="scroller">
        <div>Geeks</div>
        <div>for</div>
        <div>Geeks</div>
        <div>for</div>
        <div>Geeks</div>
    </div>
</body>
</html>


Output:

Supported Browsers:

  • Google Chrome 69
  • Edge 79
  • Firefox 68
  • Opera 56
  • Safari 14.1


Similar Reads

CSS scroll-margin-block-end property
The scroll-margin-block-end property is used to set all the scroll margins to the end side of a scroll element at once. This property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snap port. Syntax: scroll-margin-block-end: length /* Or */ scroll-margin-block-end: Global_Value
2 min read
CSS scroll-margin-block property
The scroll-margin-block property is used to set all the scroll margins to the start and end of a scroll element at once. This property is shorthand for the scroll-margin-block-start and scroll-margin-block-end property. The selection of the start and end sides depends upon the writing mode. The start side and end side are top and bottom sides respe
2 min read
CSS scroll-margin Property
The scroll-margin property is used to set all the scroll margins of an element at once. The value specified for the scroll-margin determines how much of the page that is primarily outside the support should remain visible. Hence, the scroll-margin values represent outsets that define the scroll snap area that is used for snapping this box to the su
2 min read
CSS scroll-margin-right property
The scroll-margin-right property is used to set all the scroll margins to the right of an element at once. The value specified for the scroll-margin-right determines how much of the page that is primarily outside the snapport should remain visible. Hence, the scroll-margin-right values represent outsets that define the scroll snap area that is used
2 min read
CSS scroll-margin-top property
The scroll-margin-top property is used to set all the scroll margins to the top of an element at once. The value specified for the scroll-margin-top determines how much of the page that is primarily outside the support should remain visible. Hence, the scroll-margin-top values represent outsets that define the scroll snap area that is used for snap
2 min read
CSS scroll-margin-left property
The scroll-margin-left property is used to set all the scroll margins to the left of an element at once. The value specified for the scroll-margin-left determines how much of the page that is primarily outside the support should remain visible. Hence, the scroll-margin-left values represent outsets that define the scroll snap area that is used for
2 min read
CSS scroll-margin-block-start property
The scroll-margin-block-start property is used to set all the scroll margins to the start side of a scroll element at once. This property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snap port. Syntax: scroll-margin-block-start: length /* Or */ scroll-margin-block-start: Gl
2 min read
CSS scroll-margin-inline-end property
The scroll-margin-inline-end property is used to set all the scroll margins to the end of the inline dimension of a scroll element at once. The selection of the end side depends upon the writing mode. The end side is the right side for the horizontal-tb writing mode and bottom or top side for the vertical-lr and vertical-rl writing mode respectivel
2 min read
CSS scroll-margin-inline-start Property
The scroll-margin-inline-start property is used to set all the scroll margins to the start of the inline dimension of a scroll element at once.The selection of the start side depends upon the writing mode. The start side is left side for horizontal-tb writing mode and top or bottom side for the vertical-lr and vertical-rl writing mode respectively.
2 min read
CSS scroll-margin-inline Property
The scroll-margin-inline property is used to set all the scroll margins to the start and end of a scroll element at once. This property is shorthand for the scroll-margin-inline-start and scroll-margin-inline-end property. The selection of the start and end sides depends upon the writing mode. The start side and end side are left and right sides re
2 min read