More on these later.Ī snap position can be produced by declaring a desired alignment on an element. scroll-snap-type determines the axis on which scrolling occurs: x, y, or both, and the snapping strictness: mandatory, proximity. This tells the browser that it should consider snapping this scroll container to the snap positions produced by its descendants.
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 finishes.Ī scroll container may be opted into scroll snapping by using the scroll-snap-type property. Here scroll snapping ensures at the end of scrolling an image horizontal center is aligned with the horizontal center of the scroll container. Example of using css scroll snap with an image carousel. No scroll adjustments needed by JavaScript. Going back to our earlier example, as the user finishes scrolling the carousel, its visible image snaps into place. Browsers then choose the most appropriate end position depending on the particulars of the scroll operation, scroll container's layout and visibility, and details of the snap positions, then smoothly animate to it. CSS Scroll Snap ensures a fast, high fidelity, and easy-to-use solution that works consistently across browsers.ĬSS Scroll Snap allows web authors to mark each scroll container with boundaries for scroll operations at which to finish. However, JavaScript-based solutions fail to provide a full fidelity solution due to lack of scroll customization primitives or access to composited scrolling.
Web developers have long relied on JavaScript-based solutions for controlling the scroll to help address this shortcoming. These use cases benefit from a well-controlled scrolling experience. This is even more pronounced for paginated or itemized content with meaningful boundaries when the scroll finishes at the middle of the page or image, leaving it partially visible. Rarely does a scroll end up aligned to a paragraph or sentence. Scrolling's main drawback is its lack of precision. So it is no surprise that web authors increasingly prefer to organize content into scrollable flat lists as opposed to deep hierarchies. It is the platform's native means of providing access to more information than is visible on the screen at once, becoming especially vital on mobile platforms with limited screen real estate. Scrolling is a popular and natural way to interact with content on the web. Background # The case for scroll snapping # If material includes the deprecated scroll-snap-points-x and scroll-snap-points-y properties, it should be considered outdated. A previous version of the specification was implemented in some browsers, and may appear in tutorials and articles. CSS Scroll Snap is supported in all major browsers.
0 kommentar(er)
