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 を設定すると、本文がオーバーフロー: 非表示になり、本文はスクロールしませんが、垂直スクロールバーを削除/追加するときにファンシー ボックスが本文のコンテンツをシフトすることは望ましくありません。ありがとう。

編集 ドキュメントのjqueryでは、 セレクターが省略されているかnullの場合、イベントハンドラーは直接または直接バインドされていると呼ばれます。ハンドラーは、選択した要素でイベントが発生するたびに呼び出されます。イベントが要素で直接発生するか、子孫 (内部) 要素から発生するかは関係ありません。

では、バブルアップされたイベントがファンシーボックスを本文までスクロールするのをなぜこれが防げないのでしょうか? (使用: $jq191('html, body').on('DOMMouseScroll mousewheel touchmove', function( e ){ e.preventDefault(); e.stopPropagation(); }); )

もう1つの奇妙なことは、オーバーレイをスクロールすると、デバッガーが開いているときにイベントで中断しますが、イベントで中断した直後に本体がスクロールされることです。おそらくバグです。

edit made a jsfiddle @ http://jsfiddle.net/Sa7AP/ピンクのボックス内でクロムとサファリをスクロールすると、ピンクのボックスの最後に到達してスクロールし続けると、背景もスクロールします。ファンシーボックス内をスクロールするときに背景のスクロールを防止しようとしています。

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 に答える