Dialog: disable main window scrolling when showing Dialog

[Josh Trutwin]

When a dialog is up over a document that has scrollable content it can be kind of annoying when use of the mouse wheel accidentally scrolls the document (body) and your dialog repositions. I have this complaint often when the dialog content itself is scrollable and you use the mouse wheel to scroll to the end of the dialog's content, but then it automatically switches over to the document body when scrolling past the end of the dialog's scrollable content. I found a quick fix for this that prevents this problem:

dojo.connect(dijit.byId('myDlg'), 'hide', function() {
   dojo.style(dojo.body(), 'overflow', 'auto'); 
   document.body.scroll = ''; // needed for ie6/7
});

dojo.connect(dijit.byId('myDlg'), 'show', function() { 
   dojo.style(dojo.body(), 'overflow', 'hidden'); 
   document.body.scroll = 'no'; // needed for ie6/7
});

This removes the scrollbars on the document body whenever a dialog is up.

Might be nice to have a param, e.g. preventBodyScroll="true" to enable?

Tested in ie6,7,8 and ff3 - this works in all but ie6 (surprise!)

[bill]

It seems like a good idea to me except that it doesn't work on IE6, but others might disagree...

There are periodic complaints about making the scrolling better (not disabling it), see for example #8679 and #9779.

[Josh Trutwin]

I thought I heard a rumor (maybe I dreamed it) that ie6 support was dropping in 1.4? Or maybe that was 2.0?

I'll keep an eye out for an ie6 solution...

[Josh Trutwin]

FYI: This works in ie6, ie7, ie8, ff3:

dojo.connect(dijit.byId('myDlg'), 'hide', function() { 
   if (document.all && document.createAttribute && document.compatMode != 'BackCompat') {
      // IE6 (and above) in standards mode
      document.getElementsByTagName('html')[0].style.overflow = '';
   } 
   else {
      document.body.style.overflow = '';
   }
});

dojo.connect(dijit.byId('myDlg'), 'show', function() { 
   if (document.all && document.createAttribute && document.compatMode != 'BackCompat') {
      // IE6 (and above) in standards mode
      document.getElementsByTagName('html')[0].style.overflow = 'hidden'; 
   }
   else {
      document.body.style.overflow = 'hidden';
   }
});

[bill]

Dup of #9024.