4

I'm using simple modal. Is there any way to keep the background (behind the overlay) from scrolling when you roll the mouse wheel while outside the boundaries of the modal?

Thanks!

1252748
  • 14,597
  • 32
  • 109
  • 229

2 Answers2

5

While creating the modal, set overflow:hidden for body. Then you will not be able to scroll the background and when hiding the modal, set overflow:auto for body.

1

I think you can do this:

$(document).on('mousewheel', '.simplemodal-overlay, .simplemodal-data', function(event) {
    event.preventDefault();
});

I'm not sure if mousewheel has full cross-browser support, though.

Edit: I verified this works, but you need the mousewheel plugin: https://github.com/brandonaaron/jquery-mousewheel/downloads

Example: http://jsfiddle.net/jtbowden/AhpLc/

(I pasted jquery.mousewheel.min.js into the script area... Don't do that)

Jeff B
  • 29,943
  • 7
  • 61
  • 90
  • ah. works pretty well. thanks! the problem is that the modal has got a couple boxes with scrollbars in them. so when you use the mousewheel within them, when you hit the bottom, the page in the background still scrolls. is there a way to modify the selection so that those scrolls work and nothing else does when the modal is up? thanks again! – 1252748 Mar 09 '12 at 18:58
  • That turns out to be a lot harder, because `mousewheel` doesn't conform to the normal event bubbling/propagation as other events. I have yet to figure out an easy way to do this. – Jeff B Mar 09 '12 at 20:21