This property is useful to stop scrolling at some specific point of the page. You can use this property in the gallery section of your web-page. It will give you the full control of the scrolling.
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]
Property Values: This property uses many values as mentioned above and described below:
- none: This property disable the scroll snapping that will ignore the snapping points.
- x: This property enables the scroll snapping along with the x-axis that works on snap position of horizontal axis.
- y: This property enables the scroll snapping along with the y-axis that works on snap position of vertical axis.
- block: This property enables the scroll snapping along with the block-axis that works on snap position of block axis.
- inline: This property enables the scroll snapping along with the inline-axis that works on snap position of inline axis.
- both: This property enables the scroll snapping with the both-axis included x, y, block and inline axis.
- mandatory: This property enables specific strict value that go to the specific scroll position when there is no scrolling.
- proximity: This property enables specific strict value that go to the specific scroll position. If scrolling action gets pretty close to a snap position if not close then it will act normally and should not snap at all.
Example: Below example will illustrate the Scroll Snap type property:
Supported Browsers: The browsers supported by Scroll Snap Type are listed below:
- Google Chrome 69
- Internet Explorer 11
- Firefox 68
- Safari 11
- CSS | scroll snap
- CSS | Scroll Snap stop
- Hide scroll bar, but while still being able to scroll using CSS
- CSS | Scroll Padding
- CSS | Scroll Padding top
- CSS | Scroll Padding bottom
- How to scroll window using jQuery ?
- CSS | scroll-behavior Property
- How to scroll automatically to the Bottom of the Page using jQuery?
- How to determine the direction of a jQuery scroll event?
- How to accordion scroll to top to open content in Bootstrap ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.