0

I have created a dialog box that is aligned to the middle of the screen using a combination of position:fixed, overflow:auto and display:table, as follows:

.dialog {
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    z-index: 1000000;
    background-color: rgba(193, 208, 145, 0.75);
    text-align: center;
    overflow: auto;
}
.dialog > div {
    display: table;
    width: 100%;
    height: 100%;
}
.dialog > div > div {
    display: table-cell;
    vertical-align: middle;
}
.dialog > div > div > div {
    display: inline-block;
    text-align: left;
    min-width: 300px;
    max-width: 640px;
    border: 1px solid #004000;
    background-color: #e2ffcd;
    border-radius: 6px;
}

Demo

This works to good effect, however a problem is encountered when the contents of the dialog box are larger than the screen - this happens fairly often on mobile devices, but it can also happen on desktop in certain cases depending on contents.

When this happens, scrolling becomes awkward. On desktop, the user sees two scrollbars, and using the mousewheel will scroll the page behind the dialog box if the dialog itself has reached the end. On mobile, it seems to take some serious persuasion for the touchscreen to understand that the user wants to scroll the dialog, not the entire page. Testing on my 3DS Browser was the worst as the circle-pad would scroll the entire page, not the dialog.

How might I go about improving this situation? Ideally I'd want the page's contents to be locked in place while the dialog itself sort of "becomes" the main page for the purposes of scrolling. Note that the dialog is created by JavaScript, so JS-based solutions to this problem are acceptable.

Niet the Dark Absol
  • 301,028
  • 70
  • 427
  • 540
  • Possible duplicate of [How to prevent document scrolling but allow scrolling inside div elements on websites for iOS and Android?](http://stackoverflow.com/questions/15132630/how-to-prevent-document-scrolling-but-allow-scrolling-inside-div-elements-on-web) – Ani Menon Jul 04 '16 at 09:42
  • @AniMenon I'm sorry, but I don't see how that "duplicate" is related to my question. – Niet the Dark Absol Jul 04 '16 at 09:45
  • When you append the dialog box to the page, you can disable page scrolling by adding a `overflow: hidden` class to the page container (`body` tag in this case). And also don't forget to remove that class when the dialog box is being removed. – Lewis Jul 04 '16 at 09:47
  • If my understanding is right, you want to scroll the inner div without the page moving up/down and that question is similar. Also check [this](http://stackoverflow.com/questions/5921688/single-finger-scrolling-for-inner-contents-div-iframes-in-iphone-mobile-safari) and [this](http://ux.stackexchange.com/questions/12176/scrolling-divs-in-mobile-land-yea-or-nay). – Ani Menon Jul 04 '16 at 09:48
  • @Tresdin I had tried that solution, but it causes the page's contents to jump to the side slightly as the scrollbar disappears, and also in some browsers at least it would jump to the top of the page, then jump back when the dialog was dismissed. – Niet the Dark Absol Jul 04 '16 at 09:51
  • @NiettheDarkAbsol You can try [these answers](http://stackoverflow.com/questions/8701754/just-disable-scroll-not-hide-it) to disable scrolling without removing scrollbar. One of them suggests to use `position: static; overflow-y:auto ;` instead of `overflow: hidden`. – Lewis Jul 04 '16 at 10:08
  • @Tresdin Unfortunately that too causes the page's contents to jump to the top while the "disable scroll" is in effect. EDIT: Never mind, looked at further answers, going to test some things now. – Niet the Dark Absol Jul 04 '16 at 10:12
  • @Tresdin ok, so that nicely disables scrolling the main content, but it doesn't do much for touchscreens trying to scroll the dialog. It seems the only real way to handle this would be to somehow override default touch-drag behaviour (somehow without affecting taps/clicks) or make the dialog be the page content... – Niet the Dark Absol Jul 04 '16 at 10:19
  • @Tresdin ok, that actually helped a lot. I had to make [some adjustments](https://jsfiddle.net/zserwfyy/2/), the most awkward of which being that I had to make the `display:table` element's `height:100vh` because `100%` wasn't working with the idea of making the dialog's contents static. A little more tweaking and I should be good to go! – Niet the Dark Absol Jul 04 '16 at 10:38
  • @Tresdin Having implemented the changes, I'm already getting very positive feedback for the new usability. Thank you for your pointer. – Niet the Dark Absol Jul 04 '16 at 14:20

0 Answers0