I love jQuery UI dialogs. I hate when scrolling the dialogs’ content to the bottom starts scrolling the page underneath, moving the dialog off screen. With some smart structure of the page’s html, that can be avoided.

jquery-UI-dialog First, let’s show the problem. This is a basic page with a jQuery UI dialog shown. The dialog is modal, so it prevents access to the page behind. There are scroll bars on both the dialog and then page. Scrolling the dialog’s content with the mouse wheel works fine, until the bottom of the dialog is reached. At this point, I do expect continued rolling of the wheel to hit a dead end. Unfortunately it doesn’t. It starts scrolling the page behind the dialog instead. Rolling some more will eventually move the dialog off page, leaving the user with a large disabled area. That is definitely not a good user experience. Here is a small live demo.

The Body Scrolls

jquery-UI-scroll-bad The problem appears because the jQuery UI dialog is just a cleverly designed div that is added dynamically to the end of the body. Pressing F12 on the live demo page shows that there is a <div> right before the closing </body> tag. That div is the jQuery UI dialog.

When hitting the bottom of the dialog it can no longer be scrolled. Instead the parent element – the entire <body> is scrolled and the dialog moves off page. The solution is to no longer make the <body> scrollable but instead move the scrolling to a separate <div>.

Scroll a Div Instead

jquery-UI-scroll-good Inserting a separate <div> that handles the scrolling solves the problem. Here is a small live demo. Looking at the html in the developer tools of the browser shows that the jQuery UI dialog is still inserted at the bottom of the <body>, but now it’s no longer the <body> that scrolls but rather a separate wrapper <div>.

Scrolling Div Source

This is the source of the page that uses a separate <div> for scrolling. (Most of the Lorem Ipsum text block is removed for brevity.)

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #wrapper
        {
            overflow-y: scroll;
            height: 100%;
        }
        #main
        {
            width: 800px;
            margin: auto;
        }
        html, body
        {
            margin: 0;
            overflow: hidden;
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            $("<div><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p></div>")
            .dialog({ height: "200", modal: true });
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <div id="wrapper">
        <div id="main">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a massa sed eros
            semper fringilla. Donec leo arcu, vehicula in egestas id, vulputate sit amet diam.
            ...
            ...            
        </div>
    </div>
</body>
</html>

12 comments

Try this (from http://stackoverflow.com/questions/4887332/):

$(formObject).dialog({
 create: function(event, ui) {
  $("body").css({ overflow: 'hidden' })
 },
 beforeClose: function(event, ui) {
  $("body").css({ overflow: 'inherit' })
 }
});

Mr Grateful says:

2017-03-28 at 23:18

This works perfectly for what I need. Thanks!

Reply
Anthony says:

2020-02-08 at 19:52

Works great, however I do experience putting overflow: ‘hidden’ under the create parameter causes opening of the dialog not to be set in the body css the second time after closing the dialog. I had to change it slightly to… open: function(event, ui) {$(‘body’).css({ overflow: ‘hidden’ })},

Reply

Wow! nice trick! thanks a lot Mr Anders Abel!
It works way better than the “overflow: hidden” trick and doesn’t even require JavaScript.
It’s simply brilliant!

Cheers, joedf

Excellent, works perfectly and it was very easy to implement in Oracle Apex. Thanks.

There is a problem in this method.
When you refresh the page, scroll position is not saved.

I’d like to “praise” the post! However this is only good if you are not grabbing sever side content from within your HTML.

I’ve been forced to keep my markup as is but utilized something along the lines of what @Chris did with removing body:overflow-y on open. This creates a jump when the scrollbar’s 17px is removed.

The issue with this method is that when you navigate to another page from a button inside the dialog, the scroll for the new page is disabled. Is there a way to fix this anybody?

Anders Abel says:

2015-06-12 at 15:20

That sounds strange to me. When a new page is loaded everything should be reset. Is the button in your dialog containing a plain link or does it do some kind of ajax reload?

Reply

Problem with this trick is that when you have a header set to fixed with width:100% the headr will be on top of the scroll which will hide a part of the scroll bar and that is not the case when using the body scroll

Just wanted to let you know that your small demo isn’t loading properly, there are HTTPS related errors in the console.

Anders Abel says:

2017-04-06 at 10:47

Thanks for letting me know, it’s now fixed.

Reply

Prevent Page behind JQuery UI Dialog from Scrolling

The Body Scrolls

Scroll a Div Instead

Scrolling Div Source

12 comments

Leave a comment Cancel reply