jquery 1.9.1 and safari on macbook air, .on() event handler doesn't work

Question

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.

Answer 1

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:

<div class="container">
    <div class="fancybox-wrap">
       inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text inner pink text 
    </div>
    random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random textrandom text random text random text random text random text random text random text random text random text random text random text random text random text random text random text
</div>

javascript:

function isBeyond( element, event )
{
    var el = $( element );
    var scrollTopHeight= el[0].scrollHeight - el[0].clientHeight;
    var delta= event.originalEvent.wheelDelta || -event.originalEvent.detail;
    if ( ( el.scrollTop() <= 0 &&  delta > 0 ) || ( el.scrollTop() >= scrollTopHeight && delta < 0 ) ) {
      return true;
    }
    return false;
}

jQuery('.fancybox-wrap').on('DOMMouseScroll mousewheel touchmove', function(e) { if( isBeyond( this, e) )
{
     e.preventDefault();
} });

Answer 2

Try this

$jq191('body').on('DOMMouseScroll mousewheel touchmove', '.fancybox-overlay', function( e ){ e.preventDefault(); e.stopPropagation(); });

or

$jq191('html body').on('DOMMouseScroll mousewheel touchmove', '.fancybox-overlay', function( e ){ e.preventDefault(); e.stopPropagation(); });