How to temporarily block the scrolling of a web page?

Question

How to temporarily block the scrolling of a web page when a dialog box is displayed? I have a dialog box in which I want to enable scrolling after deactivating scrolling from an overlay web page .

Is there a js command to temporarily disable scrolling?

Answer 1

You can set the container element or perhaps the body in overflow: hidden with the width and height of the browser window. This way, any overflowing content will fall off the page and the scroll bars will never be displayed. This can be specified in a css statement, for example body.dialog-open { overflow: hidden; } body.dialog-open { overflow: hidden; } . You can then add and remove the class name .dialog-open when opening and closing the dialog box.

Width and height may not be required if you install this on the body, but I will need to check browser compatibility with this. There may be unexpected results.

edit: If you want to scroll inside your dialog, you can set overflow: auto with the height set on this element.

Older browsers (especially IE) may also show a horizontal scrollbar, you may need to set overflow-x: hidden if so.

Also see: CSS div element - how to show only horizontal scrollbars? for more information on scrollbars.

Answer 2

EDIT Try the following:

In the opening dialog box (removing the scroll bar and preventing the user from scrolling):

  $('body').css({'overflow':'hidden'}); $(document).bind('scroll',function () { window.scrollTo(0,0); }); 

In the Close dialog box (allow user to scroll):

  $(document).unbind('scroll'); $('body').css({'overflow':'visible'});