Scroll chaining

Have you ever opened a modal and started scrolling, and then when you reach the end and keep scrolling, the content underneath the modal (the body element) will scroll? This is called scroll chaining.

There have been a few hacks to make this work in the past years, but now, we can do that with CSS only, thanks to the ‌overscroll-behavior CSS property.

In the following figure, you see the default scroll chaining behavior.

To avoid that ahead of time, we can add that to any component that needs to scroll (e.g: chat component, mobile menu.. etc). The nice thing about this property is that it won’t have an effect until there is scrolling.

.modal__content {
    overscroll-behavior-y: contain;
    overflow-y: auto;
}

Examples and use cases #

Scroll chaining #

In this example, try to scroll the modal and you will notice that the body scrolled once you view all the modal content. This is called scroll chaining.

Thankfully, we can solve now with CSS. Try to toggle the checkbox and try scrolling again!

.modal__body {
    overscroll-behavior-y: contain;
    overflow-y: auto;
}

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque harum est eum aperiam sed ut soluta quia nisi asperiores autem. Corporis consectetur amet sapiente necessitatibus veritatis aut quia maiores. Enim.

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dignissimos unde, officia et nulla quasi consectetur ipsam architecto labore. Quod qui eum accusamus cumque pariatur fugiat dolores ad, aspernatur excepturi!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione non nostrum, ducimus velit excepturi dolor veniam delectus quibusdam, alias voluptas assumenda. Nesciunt optio consequatur consectetur in natus quod ad quisquam.

Toggle Defensive

In case you want to learn more about it, I wrote a detailed article on that.