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.DesktopChromeOperaFirefoxIEEdgeSafari69No6411*18*11Mobile / TabletiOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox11.0-11.2NoNo676962UsageVertical – Scroll Snapping PropertyThe 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 PropertyTo 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 PropertyScroll 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 CSSShare this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblrRelatedTags: css scroll, css3, new css property, scroll snapping, snap points