Can you scroll in a modal?

Can you scroll in a modal?

Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class. Adding on to Carlos Calla’s great answer.

Do not scroll when modal open?

Approach: A simple solution to this problem is to set the value of the “overflow” property of the body element to “hidden” whenever the modal is opened, which disables the scroll on the selected element.

What prevents the body from scrolling when a modal is opened?

2 Answers. The easiest way is change the body atributes. When the modal is open, set the height to 100% and hidden the overflow. When the modal is closed change the atributes do initial values (auto).

How disable scroll when modal is open react?

Final Solution

1. when opening the modal, set the document. body as position: fixed and set its offset based on the current scrolling.
2. when closing the modal, clean the style on the document. body and scroll the body to the previous position.

How to enable scrolling of content inside a modal?

Note that in Bootstrap 3, the modal has been refactored to better handle overflowing content. You’ll be able to scroll the modal itself up and down as it flows under the viewport. Set height for modal-body and not for the whole modal to get a perfect scroll on modal overlay.

What happens when you open a modal on a page?

Please stop me if you’ve heard this one before. You open a modal, scroll through it, close it, and wind up somewhere else on the page than you were when you opened the modal. That’s because modals are elements on a page just like any other.

What happens to scroll position when bootstrap modal closes?

It basically just stores your current scroll position in addition to setting “overflow” to “hidden” on the page body, then restores the scroll position after the modal closes. There’s a condition in there for when another bootstrap modal opens while one is already active.

Is there a way to enable scrolling in CSS?

Note that if the overflow:hidden on the body doesn’t prevent the window from scrolling for a given browser, this at least sets the original scroll location back upon exit.