CSS scroll-padding-block Property
The scroll-padding-block property is used to set all the scroll padding to the start and end of a scroll container or element in the block dimension at once. This property is shorthand for the scroll-padding-block-start and scroll-padding-block-end property.
Hence, the scroll-padding values represent outsets that define the scroll snap area that is used for snapping the box to the snap port.
Syntax:
scroll-padding-block: keyword_values /* Or */ scroll-padding-block: length_values /* Or */ scroll-padding-block: Global_Values
Property Values: This property accepts three-properties mentioned above and described below:
- length_values: This property refers to the values defined with length units. Ex: px, em, vh, etc.
- keyword_values: This property refers to the keyword_values defined with units like auto. Generally, this will be set to 0px by default but it can be a non-zero value as well if the non-zero value is more appropriate.
- Global_Values: This property refers to the global values like inherit, initial, unset, etc.
Example: In this example, you can see the effect of scroll-padding-block by scrolling to a point partway between two of the “interfaces” of the example’s content.
HTML
<!DOCTYPE html> < html > < head > < style > .geek { width: 275px; height:300px; border: solid red; color: white; display: flex; justify-content: center; align-items: center; font-size: 50px; scroll-snap-align: start none; } .w3wiki { width: 300px; height:300px; border: 2px solid green; overflow-x: hidden; overflow-y: auto; white-space: nowrap; scroll-snap-type: y mandatory; } </ style > </ head > < body > < div class = "w3wiki" style = "scroll-padding-block: 20px;" > < div class = "geek" style = "background-color:darkgreen;" > Beginner 1 </ div > < div class = "geek" style = "background-color:rgb(129, 245, 21);" > for 1 </ div > < div class = "geek" style = "color:green;" > Beginner 2 </ div > < div class = "geek" style = "background-color:rgb(115, 223, 43);" > for 2 </ div > < div class = "geek" style = "color: green;" > Beginner 3 </ div > < div class = "geek" style = "color:black;" > for 3 </ div > </ div > </ body > </ html > |
Output:
Supported Browsers:
- Chrome 69
- Firefox 68
- Edge 79
- Opera 56
- Safari 15
Contact Us