So, all we need to do is to apply overscroll-behavior to the modal. none: don't scroll either the current element or its parent.That is not the best user experience you want to offer, and rather the background contents remain fixed when you open the. For example, you might open a modal and the background contents continue scrolling. contain: scroll just the current element The issue of the overflow scroll does not only happen with the horizontal scroll but can also happen with modals.auto: scroll the element, and when reached the end of it pass the scroll to the parent.This is particularly useful in use with dynamic content and the possibility of an overflow causing serious layout problems. This literally hides any content that extends beyond the box. This will prevent the 'scroll chaining' behavior, which will, in turn, keep the mouse-wheel active within the target element. However, it fails for mobile iOS (phone and tablets). To do this (in Chrome, Firefox, and Edge), we can add the CSS property overscroll-behavior: contain to the overflow: auto element. Sean Patrick Maloney, of New York, to be Representative of the United States of America to the Organization for Economic. We have the overscroll-behavior CSS property that deals exactly with situations like these. hidden The opposite of the default visible is hidden. CSS Overflow This approach works for desktop browsers, and mobile Android. Solution: use the overscroll-behavior property to block the scrolling of the bodyĮven if it seems a complicated problem, the solution is quite simple. See the below video with the before and after example: This is what we want to prevent! We want to allow the full scrolling of the modal content, but we need to prevent the scroll of the body. Given the way overflow scroll works, after the user scrolls to the end of the modal content the scroll will move to the body. However, we don't want to scroll the main content body while the modal is visible. Let's say we have an HTML structure, with some main content and a modal, like the one below: īoth the main content and the modal have a lot of text, therefore they will be scrollable.
0 Comments
Leave a Reply. |