I have a dialog(with scrollable content body) on top of a page that's also scrollable. Now I want that when I try to scroll, from inside the dialog using mouse wheel, only the dialog body should scroll and not the page below it.
How do I do that ?
Asked
Active
Viewed 727 times
4
-
Do you mean that the dialogue window should scroll even if it's out of focus and the main window is in focus? – katspaugh Sep 17 '11 at 10:55
-
nope! I want 'scroll the one which is in focus'! – Rajat Gupta Sep 17 '11 at 10:56
-
Then it's the default behaviour. Just assign the dialogue box `overflow-y` CSS property to `auto`. – katspaugh Sep 17 '11 at 10:57
-
tried this out, but just after the dialog height has been scrolled, it starts scrolling the page body.. I want to prevent this until the page body itself gets focus and is scrolled – Rajat Gupta Sep 17 '11 at 11:06
1 Answers
2
You could try wrapping all your content into a block with overflow: auto and set the overflow property of the window to hidden.
See example here.
I don't think you can prevent the window from scrolling otherwise. See similar question: prevent Scroll "bubbling" from element to window.
Another answer suggests you can prevent the mouse-wheel event's default effect: Prevent scrolling of parent element?. But it's not ideal as scrolling also occurs upon pressing keys, selecting text and so on.
