Opened 10 years ago

Closed 8 years ago

#9780 closed enhancement (duplicate)

Dialog: disable main window scrolling when showing Dialog

Reported by: Josh Trutwin Owned by:
Priority: high Milestone: future
Component: Dijit Version: 1.3.2
Keywords: Cc:
Blocked By: Blocking:

Description

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!)

Change History (7)

comment:1 Changed 10 years ago by bill

Summary: Disable main window scrolling when showing DialogDialog: disable main window scrolling when showing Dialog

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.

comment:2 Changed 10 years ago by 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...

comment:3 Changed 10 years ago by 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';
   }
});

comment:4 Changed 10 years ago by bill

Milestone: tbd1.5

comment:5 Changed 9 years ago by Adam Peller

Milestone: 1.51.6

comment:6 Changed 8 years ago by bill

Milestone: 1.6future

comment:7 Changed 8 years ago by bill

Resolution: duplicate
Status: newclosed

Dup of #9024.

Note: See TracTickets for help on using tickets.