0

我正在使用以下代码：

$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 的 macbook air 上触发。我不知道我做错了什么。如果我将 html，body 设置为溢出：隐藏，body 不会滚动，但是我不希望花哨的框在删除/添加垂直滚动条时移动 body 的内容。谢谢。

编辑 在文档中的 jquery 中它说： 如果选择器被省略或为空，则事件处理程序被称为直接或直接绑定。每次在选定元素上发生事件时都会调用处理程序，无论它是直接发生在元素上还是来自后代（内部）元素的冒泡。

那么为什么这不能阻止冒泡事件将花式框一直滚动到正文？（使用：$jq191('html, body').on('DOMMouseScroll mousewheel touchmove', function(e){ e.preventDefault(); e.stopPropagation(); }); ）

另一个奇怪的事情是，当滚动覆盖时，当调试器打开时，它会在事件上中断，但在事件中断后，正文无论如何都会立即滚动。可能是一个错误。

编辑 制作了一个 jsfiddle @ http://jsfiddle.net/Sa7AP/如果您在 chrome 和 safari 中滚动，在粉红色框内，一旦您到达粉红色框的末尾并继续滚动，背景也会滚动。我试图在花式框内滚动时防止背景滚动。

4

2 回答 2

1

已编辑（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();
} });
于 2013-12-02T04:26:06.707 回答
1

尝试这个

$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(); });
于 2013-12-01T17:37:53.897 回答