disable browser scrolling while jQuery UI modal dialog is open

Question

is it possible to disable scrolling in browser (just for browser's scrollbars) while a jQuery UI modal dialog is open.

Note: I do want scrolling to be enabled inside the dialog

So how did you enable the scroll inside your dialog using correct answer? — Feanor, Sep 25 '14 at 14:01
@Feanor atm I'm setting css position:fixed for the dialog div, so even though the browser scrolls the dialog stays fixed, and inside the dialog the scroll works with default css (overflow: auto) — Omu, Sep 26 '14 at 07:57
JSBin reference for css overflow http://jsbin.com/yicidecodu/1/edit?html,css,output — Naveen Kumar Alone, Nov 21 '14 at 11:16

airtonix · Answer 1 · 2013-08-06T06:17:30.363

76

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

Or as I allude to in the comment below:

var dialogActiveClassName="dialog-active";
var dialogContainerSelector="body";

$(formObject).dialog({
 create: function(event, ui) {
   $(dialogContainerSelector).addClass(dialogActiveClassName);
 },
 beforeClose: function(event, ui) {
   $(dialogContainerSelector).removeClass(dialogActiveClassName);
 }
});

But actually to be honest, you should ensure that creating a dialog bubbles an event up to your window object where you'd be watching for said events, roughly something like this pseudo:

var dialogActiveClassName="dialog-active";
var dialogContainerSelector="body";
$(window).on("event:dialog-opened", function(){
    $(dialogContainerSelector).addClass(dialogActiveClassName);
});
$(window).on("event:dialog-closed", function(){
    $(dialogContainerSelector).removeClass(dialogActiveClassName);
});

edited Aug 06 '13 at 06:17

answered Aug 11 '11 at 07:02

airtonix

4,772
2
38
36

3

This only hides scroll bars, it doesn't prevent scrolling – Chaosphere2112 Dec 07 '11 at 15:09
9

Also worked for me. If you want to open the dialog later (not on page load) then bind the scrollbar hiding to the 'open' event instead of 'create'. – Germstorm Nov 15 '12 at 09:48
2

At first, it would not work for my project while using IE8. However, I got it to work by changing the above selector to $("html, body") so the style would be applied to both the body element and the HTML element. For some reason this made it start working for me! Just mentioning this here in case anyone else runs into this problem.... hopefully it will save someone time. The only problem I have with this overall solution is when the Y-axis scroll bar disappears, it creates a slight horizontal screen jitter. (When the jquery dialog opens and when it closes) – Jason Parker Mar 19 '13 at 18:38
1

actually the "Best Practice"(tm) way to deal with this is to toggle a class name on what ever container object wraps around your dialog element. – airtonix Aug 06 '13 at 06:11
1

I would recommend putting the function to prevent scroll on the `open` event instead of the `create` event. For example, if you have a button that shows the modal dialog, the body won't be able to scroll if you have already created the dialog, even if it's not showing. – Mike Jan 23 '14 at 00:12
'inherit' does not always return scroll function on close. I had better luck with 'auto' and '' – carruthd May 09 '14 at 15:01
This worked for me... Used $(window).on("dialogopen", function(){ $("body").addClass("antiscroll"); }); $(window).on("dialogbeforeclose", function(){ $("body").removeClass("antiscroll"); }); – Joel Caton Jul 11 '19 at 22:14

score 47 · Answer 2 · answered Aug 23 '12 at 14:34

47

I needed to do exactly the same thing, do it simply by adding a class to the body:

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

Add the class then remove when you want to re-enable scrolling, tested in IE, FF, Safari and Chrome.

$('body').addClass('stop-scrolling')

answered Aug 23 '12 at 14:34

hallodom

6,429
1
23
19

4

This *really* should be the answer! – Nate Sep 13 '13 at 19:11
*/golf clap.. ::single_nod::* – Brock Hensley Jun 26 '14 at 19:05
Genial! You can put on dialog....open:function () { $('body').addClass('stop-scrolling');}, beforeClose:function (){$('body').removeClass('stop-scrolling');}..... – Adrian P. Oct 17 '14 at 14:30
Best answer, simply clever :-) – DaFunkyAlex Nov 07 '14 at 14:12
This is okay for mouse scroll, but you can still scroll with keyboard buttons with this. – TheCarver Mar 15 '15 at 15:35
This also doesn't preserve the window position, if that's something you need. – PBwebD Feb 03 '16 at 04:55
This sends me back to top after modal close!I would need to stay at exact same position.How to manage to do it? – Ingus Aug 08 '17 at 13:02

Naveen Kumar Alone · Answer 3 · 2014-11-21T11:19:08.433

28

JS Bin reference for CSS overflow

Simply Add

$('body').css('overflow','hidden');

to your function that shows the modal.

And

$('body').css('overflow','scroll');

to your function that closes the modal.

edited Nov 21 '14 at 11:19

answered Jul 17 '13 at 12:05

Naveen Kumar Alone

7,536
5
36
57

2

I cant have enough appreciation for a simple solution. Thanks! – CodeGuyRoss Jul 26 '15 at 20:39
the best solution! – Marco Alves Apr 01 '17 at 02:55
For those who use primefaces and want to prevent body of the website to scroll while modal dialog is shown, just put these two into the onHide and onShow attributes of p:dialog e.g. onHide="$('body').css('overflow','scroll');" onShow="$('body').css('overflow','hidden');" – hocikto Feb 22 '18 at 13:12

score 7 · Answer 4 · edited May 23 '17 at 10:31

Here is the best that I could come up with to solve this issue (I had the same problem) using the functions referenced in the answer by JasCav above (these functions):

dialogClass: 'dialog_fixed',
create: function(event, ui) {
    disable_scroll(); // disable while dialog is visible
    $('#dialog_form').hover(
        function() { enable_scroll(); }, // mouse over dialog
        function() { disable_scroll(); } // mouse not over dialog
    );
},
beforeClose: function(event, ui) {
    enable_scroll(); // re-enable when dialog is closed
},

the css is:

.dialog_fixed { position:fixed !important; }

and it just keeps the dialog fixed on the page, which maybe we don't need anymore.

This allows mouse scrolling while the mouse is over the dialog, but not when it is outside the dialog. Unfortunately it will still scroll the main page when the mouse is over the dialog and you scroll past the end of the content inside the dialog (in IE right away, in Safari and Firefox after a short delay). I would love to know how to fix this.

I tested this in Safari 5.1.5, Firefox 12, and IE 9.

score 6 · Answer 5 · answered Feb 22 '13 at 01:03

Stops scrolling, adjusts dialog position and returns user to part of page they were viewing after they close the dialog

$('<div/>').dialog({
    open : function(event, ui) { 
        $('html').attr('data-scrollTop', $(document).scrollTop()).css('overflow', 'hidden');
        $(this).dialog('option','position',{ my: 'center', at: 'center', of: window });
    },
    close : function(event, ui) { 
        var scrollTop = $('html').css('overflow', 'auto').attr('data-scrollTop') || 0;
        if( scrollTop ) $('html').scrollTop( scrollTop ).attr('data-scrollTop','');
    }
});

This is the functionality that's expected when you want to stop a page from scrolling when the dialog is opened. If you're hovering over something when the dialog opens and want to retain the hover state, best way is to use add/remove class for the styles. — PBwebD, Feb 03 '16 at 05:07

score 4 · Accepted Answer · edited May 23 '17 at 12:26

4

You can't disable scrolling completely, but you can stop scrolling with the mouse wheel and the buttons that typically perform scrolling.

Take a look at this answer to understand how that is done. You could call these functions on the create event and return everything to normal, on close.

edited May 23 '17 at 12:26

Community

1
1

answered Feb 03 '11 at 14:35

JasCav

34,458
20
113
170

19

This is a nice solution, but it disables scrolling in the dialog as well, but if I understand the question correctly, we want the scrolling to work in the dialog, just not anywhere else. – Craig Nakamoto May 02 '12 at 19:03
@CraigNakamoto, I think you can attach the eventListener to the dialog after then. So the scroll will be disabled in document level, but the dialog still have a event listener for scroll. It will be something like `$(document).('on', '.dialog', function(){ /*scroll code*/ });` – lhrec_106 May 13 '16 at 02:01

score 3 · Answer 7 · answered Sep 13 '19 at 15:24

Just a modification on an answer posted above by hallodom

$('body, html').addClass('stop-scrolling')

browser scrolling wasn't disabled until I added html.

.stop-scrolling {
  overflow: hidden;
}

by removing height: 100%, the bump-to-top effect was removed.

Tested on Chrome, Firefox and Safari.

hcharge · Answer 8 · 2012-10-19T12:09:17.243

2

Old post but the way I did it was:

open: function(event, ui) {                
     $('html').css('overflow', 'hidden');
     $('.ui-widget-overlay').width($(".ui-widget-overlay").width() + 18);
     },
close: function(event, ui) {
     $('html').css('overflow', 'hidden');
}

This seems to work quite nicely

edited Oct 19 '12 at 12:09

answered Oct 19 '12 at 11:32

hcharge

1,216
2
24
43

score 2 · Answer 9 · answered Dec 18 '13 at 17:37

Searched for a long long time. Finally the follow link saves me. Hope it's helpful to others.

It uses a container for the main body. The scrolling in dialog won't affect the background container.

http://coding.abel.nu/2013/02/prevent-page-behind-jquery-ui-dialog-from-scrolling/

score 2 · Answer 10 · answered Feb 25 '16 at 18:39

Create this css class:

.stop-scrolling {
    overflow:hidden;
    height: 100%;
    left: 0;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    width: 100%;
}

Then add this to your dialog init:

$("#foo").dialog({
    open: function () {
        $('body').addClass('stop-scrolling');
    },
    close: function () {
        $('body').removeClass('stop-scrolling');
    },
    // other options
});

If you are already using open: and close: to call other functions, just add the addClass and removeClass lines in the appropriate place.

score 2 · Answer 11 · answered Jul 05 '18 at 12:38

$(settings.dialogContentselector).dialog({
        autoOpen: false,
        modal: true,
        open: function( event, ui ) {
            $("html").css({ overflow: 'hidden' });
            $("body").css({ overflow: 'hidden' });
        },
        beforeClose: function( event, ui ) {
            $("html").css({ overflow: 'auto' });
            $("body").css({ overflow: 'auto' });
        }
    });

score 1 · Answer 12 · answered Sep 23 '12 at 17:06

1

try this one. it being used by http://jqueryui.com itself

html { overflow-y: scroll; }

answered Sep 23 '12 at 17:06

Izzati Ali

31
3

score 1 · Answer 13 · answered Oct 12 '12 at 08:17

1

create: event Makes scrollbars disappear when page loading for first time I change it with open: and working now like a charm

answered Oct 12 '12 at 08:17

Otto Kanellis

3,629
1
23
24

score 0 · Answer 14 · answered Feb 21 '17 at 10:51

A better solution avoiding body jumps to top when popup is closed:

$(document).ready(function(){
  var targetNodes         = $(".cg-popup");
  var MutationObserver    = window.MutationObserver || window.WebKitMutationObserver;
  var myObserver          = new MutationObserver (mutationHandler);
  var obsConfig           = { attributes : true, attributeFilter : ['style'] };
  // ADD A TARGET NODE TO THE OBESERVER. CAN ONLY ADD ONE NODE AT TIME
  targetNodes.each ( function () {
      myObserver.observe (this, obsConfig);
  } );
  function mutationHandler (mutationRecords) {
    var activate_scroll = true;
    $(".cg-popup").each(function( index ) {
      if($(this).css("display") != "none"){
        $('html, body').css({'overflow-y': 'hidden', 'height': '100%'});
        activate_scroll = false;
        return;
      }
    });
    if(activate_scroll){
      $('html, body').css({'overflow-y': 'auto', 'height': 'auto'});
    }
  }
});

score -1 · Answer 15 · answered Jun 20 '15 at 12:34

This issue is fixed, Solution: Just open your bootstap.css and change as below

body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
margin-right: 15px;
}

to

body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
/margin-right: 15px;/
}

Please view the below youtube video only less than 3min your issue will fix... https://www.youtube.com/watch?v=kX7wPNMob_E

score -3 · Answer 16 · edited Oct 11 '12 at 11:47

-3

It is because you have to add modal: true in your code; this prevent user from interacting with background.

edited Oct 11 '12 at 11:47

JSK NS

3,346
2
25
42

answered Jul 10 '12 at 14:29

Hal

1

1

you can't interact with the background but you still can scroll the page using the scrollbars or the mouse wheel – Luca Borrione Jan 30 '13 at 08:46

disable browser scrolling while jQuery UI modal dialog is open

16 Answers16

Linked