Note that setting overscroll-behavior will set both axes. The property is a shorthand for overscroll-behavior-x and overscroll-behavior-y. It’s supported in all major browsers except Safari.
The overscroll-behavior property sets what a browser should do when we reach the boundary of a scrolling area. I wish to go back in time and introduce the overscroll-behavior to the solution. I kept trying and researching a lot, but without a perfect solution. “Programming” refers to CSS in that case, in case you’re wondering. I remember working on a client project in 2018 where I told him that we can’t prevent the body scrolling for the mobile menu on iOS. When a modal is opened, we add a class to the body that is responsible for applying the overflow. We used to fix that by applying overflow: hidden on the body element via Javascript. In the figure above, notice how when we reached the end of the modal, the page continued to scroll. This behavior is often not needed and can distract the user from focusing on the modal content.
It’s a default behavior that can be overridden now with a new CSS property called overscroll-behavior. When we reach the end of the modal content, the browser will continue scrolling on the main page’s content instead. Underneath that modal, there is the actual web page content. We have a modal dialog that is positioned in the center of the viewport. In this article, we’ll go through the overscroll-behavior CSS property, what’s the problem it solves, how it works, and where we can use it. If it has scrolling, you will notice that when you reach the bottom boundary of the element, the browser will continue scrolling on the body element. Let’s suppose that we have an element with position: fixed.
0 kommentar(er)
