How to scroll the page when a modal dialog is longer than the screen?

Question

I have a modal dialog in my app which can get quite long in the y direction. This introduces a problem whereby some of the content of the dialog is hidden off the bottom of the page.

I would like the window scrollbar to scroll the dialog when it is displayed and too long to fit on the screen but leave the main body in place behind the modal. If you use Trello then you know what I'm going for.

Is this possible without using JavaScript to control the scrollbar?

Here is the CSS I have applied to my modal and dialog so far:

body.blocked {   overflow: hidden; }  .modal-screen {   background: #717174;   position: fixed;   overflow: hidden;   width: 100%;   height: 100%;   top: 0;   left: 0;   opacity: 0.9;   z-index: 50; }  .dialog {   background: #fff;   position: fixed;   padding: 12px;   top: 20%;   left: 50%;   z-index: 10000;   border-radius: 5px;   box-shadow: 0, 0, 8px, #111; } 

Answer 1

Try:

.modal-body {     max-height: calc(100vh - 210px);     overflow-y: auto; } 

It will arrange your modal and then give it an vertical scroll

Answer 2

This is what fixed it for me:

max-height: 100%; overflow-y: auto; 

EDIT: I now use the same method currently used on Twitter where the modal acts sort of like a separate page on top of the current content and the content behind the modal does not move as you scroll.

In essence it is this:

var scrollBarWidth = window.innerWidth - document.body.offsetWidth; $('body').css({   marginRight: scrollBarWidth,   overflow: 'hidden' }); $modal.show(); 

With this CSS on the modal:

position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; 

JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Pure JS version (IE9+): https://jsfiddle.net/0x0049/koodkcng/1/

This works no matter the height or width of the page or modal dialog, allows scrolling no matter where your mouse/finger is, doesn't have the jarring jump some solutions have that disable scroll on the main content, and looks great too.