jquery 1.9.1 和 MacBook Air 上的 Safari,.on() 事件处理程序不起作用



我正在使用以下代码:

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

我也试过:

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

但事件处理程序从未在带有safari的macbookair上触发。我不知道我做错了什么。如果我将html,body设置为溢出:隐藏,body不会滚动,但我不希望在删除/添加垂直滚动条时,花哨的框会移动body的内容。谢谢

编辑在关于文档的jquery中,它说:如果省略了选择器或选择器为null,则将事件处理程序称为直接绑定或直接绑定。每当事件发生在所选元素上时,无论是直接发生在元素上还是子代(内部)元素中的气泡,都会调用处理程序

那么,为什么这不能阻止冒泡事件将一个粉丝框一直滚动到身体?(使用:$jq191('html,body').on('DOMouseSoll鼠标滚轮touchmove',函数(e){e.preventDefault();e.stopPropagation();});)

另一件奇怪的事情是,当滚动覆盖时(这是有效的),当调试器打开时,它会在事件上中断,但在中断事件后,正文会立即滚动。可能是个虫子。

编辑做了一个小提琴http://jsfiddle.net/Sa7AP/如果你在粉色框内滚动chrome和safari,一旦你到达粉色框的末尾,并继续滚动,背景也会滚动。当我在fancybox中滚动时,我试图阻止背景的滚动。

试试这个

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

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

已编辑(javascript逻辑已更改-正在工作)

好的,我找到了另一个SO问题,并使用了他们的一个稍微修改过的版本: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();
} });

相关内容

最新更新