Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
115
rated 0 times [  122] [ 7]  / answers: 1 / hits: 68013  / 13 Years ago, mon, june 20, 2011, 12:00:00

How can I lock scrolling of a webpage temporarily when a dialog box is displayed ? I have a dialog box within which I want to enable scrolling after deactivating scrolling from the overlayed webpage.



Is there a js command to temporarily disable scrolling ?


More From » html

 Answers
14

You could set a container element or maybe even the body to overflow: hidden with a width and height of the browser window. This way any overflowing content will fall off the page and scroll bars are never displayed. This can be set in a css statement like body.dialog-open { overflow: hidden; }. You can then add and remove the .dialog-open classname when the dialog opens and closes.



The width and height might not be required if setting this on the body, but I'd have to check browser compatibility on that one. Might get some unexpected results there.



edit:
If you want scrolling inside your dialog you can set overflow: auto there, with a height set on that element.



Older browsers (most notably IE) might show a horizontal scrollbar as well, you might have to set overflow-x: hidden if that is the case.



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


[#91622] Friday, June 17, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
eanskylerg

Total Points: 524
Total Questions: 107
Total Answers: 100

Location: Colombia
Member since Mon, May 2, 2022
2 Years ago
;