Taking control of scroll with CSS Overscroll Behavior and Scroll Snap

Saeloun Logo

There are several new properties introduced
in the scroll bar within CSS3.
With the help of these new scroll properties,
we can manipulate DOM based on scroll position.

What is overscroll-behavior?

overscroll-behavior is mostly associated with the scroll end.
For example, whenever there is a custom div with a scrollbar
and we reach the end of the div while scrolling,
the default auto behavior of this property will
scroll the browser window or the parent div with a scroll bar.
We call this scroll chaining.

This overscroll-behavior can help to prevent scroll refresh.
For instance, when we reach the top of the mobile browser
and drag the screen, the browser gets refreshed
and prevents the bounce effect at the end of the page.

The values associated with the properties are –

  • auto: It is the default behavior with the browser and elements scroll.

  • contain: It will prevent the scroll chaining to the parent element or the browser scroll.
    However, the properties which support the scrolling like bounce and refresh after the scroll will work.

  • none: It stops the scroll chaining, Not only that, but it also stops the effects like bounce and refreshes.

This property has 2 values :

.div.contain {
    overscroll-behavior: contain;
.div.none {
    overscroll-behavior: none;
.div.auto {
    overscroll-behavior: auto;
Using default behavior for overscroll-behavior

As you can see in the below gif image scroll chaining works
when there is no overscroll property.

Using contain for overscroll-behavior

When we add the contain behavior scroll chaining won’t work.

What is Scroll Snap?

Scroll Snap deals with the scrolling behavior of an element.
This means that if we want to snap the scroll from element
to element, we have to implement scroll snap.

There are 2 different values under this –

  1. axis, which is for (x)horizontal and (y)vertical.
  2. type, it has two values – mandatory and proximity.
Mandatory type

This value will snap the scroll from element to element
whenever the user stops scrolling.
Now if we scroll vertically over half of the next element,
it scrolls to the next element.
The same mechanism is followed while scrolling down.
If we are beyond half the size of the element,
it loads the next
or previous element.

Proximity type

This property is less stringent, in terms of scrolling.
As per the observation, it loads the next element
completely if we scroll down above 80% of that element.
The same goes with the ‘scroll above’ option for the previous element.

Axis deals with the axis we want to apply to this property,
like horizontal
or vertical scrollbar.

.div.horizontal.proximity {
    scroll-snap-type: x proximity;
.div.vertical.mandatory {
    scroll-snap-type: y mandatory;

By default, it only works when the user stops scrolling.
But to make it work for each scroll snap point,
we can use the ‘scroll-snap-stop’ property.
This property has two values “always”
and “normal”.

As it says, Normal property is the default behavior, however,
it will always make the scroll jump to each snap point.

Also, whenever we jump the scroll to the snap point,
it always moves to the center of the element.

However, if we want to jump to the start
or end of the element, there is a property named scroll-snap-align that we can use.

It has three properties, namely
center, start,
and end.

Using mandatory value for scroll-snap-type

As you can see in the GIF image below, when we add scroll-snap-type: y mandatory; property
and once we scroll above 50% of the element it scrolls to the next element.

Using proximity value for scroll-snap-type

But for the scroll-snap-type: y proximity; it doesn’t scroll
if we scroll above 70% it scrolls to the next or previous element.


All the above scroll properties should be used with caution.
Unnecessary use of scroll properties can disturb scrolling
and cause issues in maintaining the website.

Source link

Leave a reply

Please enter your comment!
Please enter your name here