I am using the following code:
$jq191('html, body').on('DOMMouseScroll mousewheel touchmove', '.fancybox-overlay', function( e ){ e.preventDefault(); e.stopPropagation(); });
I have also tried:
$jq191('html, body').on('DOMMouseScroll mousewheel touchmove', function( e ){ e.preventDefault(); e.stopPropagation(); });
but the event handler is never triggered on the macbook air with safari. i don't know what I'm doing wrong. If I set the html, body to be overflow: hidden, the body doesn't scroll, however i don't want the fancy box to shift the content of the body when removing/adding the vertical scrollbar. Thanks.
Edit In the jquery on documentation it says: If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.
Why then would this not prevent the bubbled up event from scrolling a fancybox all the way to the body? (using: $jq191('html, body').on('DOMMouseScroll mousewheel touchmove', function( e ){ e.preventDefault(); e.stopPropagation(); }); )
Another weird thing is, when scrolling the overlay, which works, when the debugger is opened, it breaks on the event, but the body is scrolled anyway immediately after breaking on the event. Probably a bug.
edit made a jsfiddle @ http://jsfiddle.net/Sa7AP/ If you scroll in chrome and safari, inside the pink box, once you reach the end of the pink box, and keep scrolling, the background scrolls too. im trying to prevent the scroll of the background when scrolling within the fancybox.
edited (javascript logic changed - working)
ok i found another SO question, and used a slightly modified version of theirs: jsfiddle: http://jsfiddle.net/Sa7AP/20/
html:
javascript: