The “scroll-snap” CSS property is used to control the “snapping” behavior of a container’s scroll positions. “scroll-snap” property, allow web developer create a smoother scrolling experience, especially in cases where the content is divided into distinct sections or elements.
Scroll snapping is used in combination with the “scroll-snap-type” property on a container element and the “scroll-snap-align” property on elements inside it
<section class="container">
<div class="class"> </div>
<div class="class"> </div>
<div class="class"> </div>
<div class="class"> </div>
</section>.container {
scroll-snap-type: y mandatory
}
.child {
scroll-snap-align: start
}result
“scroll-snap-type” property is applied to the container(parent) element. It defines the scrolling axis and the type of snapping behavior.
no snapping behavior.
the scroll container snaps to snap position in its horizontal axis only.
the scroll container snaps to snap position in its vertical axis only.
the scroll container snaps to snap position in both of its axes independently (potentially snapping to different elements in each axis).
the scrolling will always snap to the closest snap point after scroll operation.
the scrolling will snap to closest snap point if it’s within a certain distance.
the scrolling will always snap to the nearest snap point after scroll operation, regardless of how far or close the scroll position is to the snap points. In other words, it enforces a strict snapping behavior, ensuring that the scroll position align precisely with a snap point.
the scrolling will snap to the nearest snap point only if it’s within a certain distance. If the scroll position is close enough to a snap point, it will snap, otherwise, it will not.
“scroll-padding” property in CSS is used to set the padding area for a scroll container. The “scroll-padding” property allows web developer to define additional space around the content inside the scroll container. The extra space influences the calculation of the snap points. It can take one to four values, each representing the padding for the top, right, bottom, and left sides. These value can be specified in pixel, percentages, or other length units.
“scroll-snap-align” is applied to the child elements inside the container. It defines where the snap point of each child element should be.
the snap point is at the start of the element.
the snap point is the end of the element.
the snap point is at the end of the element.
“scroll-snap-stop” property defines whether or not the scroll container is allowed to “pass over” possible snap position. The effect of this property can be noticed on device with a touchpad.
when the visual viewport of this element’s scroll container is scrolled, it may “pas over” possible snap positions
tthe scroll container must not “pass over” a possible snap position, and must snap to the first of this element’s a snap position
“scroll-margin” property is used to set additional space around scrollable elements. This property controls how far the element can fit into the scrollable area before “scroll snapping” of shifting of neighboring elements begins. It can take one to four values, each representing the padding for the top, right, bottom, and left sides. These value can be specified in pixel, percentages, or other length units.