Contents hide 1) Whatโs a Scroll Snapping Property in CSS ? 2) Browser support 2.1) Desktop 2.2) Mobile / Tablet 3) Usage 3.1) Vertical โ Scroll Snapping Property 3.2) Horizontal โ Scroll Snapping Property 3.3) Both X and Y โ Scroll Snapping Property Whatโs a Scroll Snapping Property in CSS ? Scroll snapping is the act of adjusting the scroll offset of a scroll container to be at a preferred snap position once the scroll operation is finished. That means, even if you are attempting to scroll at your own desired position on a web-page implementing this, that section of the web-page can automatically snap to a specific section. within the demo given above you will observe that Iโm trying to scroll down from on section to another (differentiated by the background colors), however as presently as I reach to a particular starting or ending of the section, the browser itself overrides my scroll location to no matter written in the web-pageโs code. Browser support This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. Desktop Chrome Opera Firefox IE Edge Safari 69 No 64 11* 18* 11 Mobile / Tablet iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox 11.0-11.2 No No 67 69 62 Usage Vertical โ Scroll Snapping Property The body tag should have a scroll-snap-type property set to y mandatory. This will define the rule of how strictly the snap points are enforced in the browser. Other than mandatory, it can have none or proximity as its value. Weโll use mandatory, because, well we really need a strict rule so that the user is not able to scroll any further. The y before mandatory tells on which axis the scroll-snap will be performed. Still inside the body, make overflow-y to scroll. It could also have been visible, hidden or auto, but we want to have the scrolling. For the section, kindly add the scroll-snap-align property to start. HTML <div class='container'> <section class='child'></section> <section class='child'></section> <section class='child'></section> ... </div> CSS .container { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start; } CodePen. Horizontal โ Scroll Snapping Property To make a horizontal slider, we tell the container to snap on its x-axis. Weโre also using scroll-padding to make sure the child elements snap to the middle of the container. CSS .container { scroll-snap-type: x mandatory; scroll-padding: 50%; } Then, we tell the container which points to snap to. To center the gallery, we define the middle point of each element as a snap point. CSS .child { scroll-snap-align: center; } Both X and Y โ Scroll Snapping Property Scroll snapping can work in two directions at the same time. Again, we can set scroll-snap-type directly on the <body> element: CSS .container { scroll-snap-type: both mandatory; } Then, we define the top-left corner of each tile as a snap point: CSS .tile { scroll-snap-align: start; } See More Articles On CSS Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: css scroll, css3, new css property, scroll snapping, snap points