CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rajat Gupta
Rajat Gupta

Reputation: 26607

Scroll dialog body but not the page below it

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 ?

Upvotes: 4

Views: 819

Answers (1)

katspaugh
katspaugh

Reputation: 17909

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.

Upvotes: 2

Related Questions