CSS scroll-snap-align property
CSS scroll-snap-align property represents the snap position of a box’s snap area within the element’s or container’s snap port.
Syntax:
scroll-snap-align: Keyword_Values; /* Or */ scroll-snap-align: Global_Values;
Property values: The scroll-snap-align property accepts two values mentioned above and described below:
- keyword_Values: This property refers to the keyword values like none, start, end, center, etc.
- Global_Values: This property refers to the global values like inherit, initial, unset, etc.
Note: When two property value is set, then the first one is for block and the second one is for inline. Ex. scroll-snap-align: start end;
Example 1: In this example, you can see the effect of scroll-snap-align by scrolling to a point partway between two of the “interfaces” of the example’s content. Here we have used none start as the property value.
html
<!DOCTYPE html> < html > < head > < style > .Beginner { width: 255px; height: 300px; border: 4px solid greenyellow; scroll-snap-align: none start; } .Container { width: 300px; height: 300px; border: 5px solid red; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scroll-snap-type: x mandatory; scroll-snap-stop: always; } </ style > </ head > < body > < div class = "Container" > < img src = "https://media.w3wiki.net/wp-content/uploads/20200723131450/img6-300x82.png" class = "Beginner" > < img src = "https://media.w3wiki.net/wp-content/uploads/20200723131449/img5.jpeg" class = "Beginner" > < img src = "https://media.w3wiki.net/wp-content/uploads/20200723131452/img4-300x167.png" class = "Beginner" > < img src = "https://media.w3wiki.net/wp-content/uploads/20200723131450/img6-300x82.png" class = "Beginner" > </ div > </ body > </ html > |
Output:
Browsers Supported:
- Chrome 69 and above
- Firefox 68 and above
- Safari 11 and above
- Edge 79 and above
- Opera 56 and above