10

スクロール可能な div を含む Web ページがあります。スクロール可能な div の上に、スクロール可能な div の半分に重なる div を絶対に配置しました。

スクロール可能なdivにマウスカーソルを置くと、マウスホイールでスクロールできます。しかし、重なっている div の上にカーソルを移動すると、マウス ホイールがその div のスクロールを停止します (絶対配置された div はスクロール可能な div 内にないため、これは正しい動作です)。

質問:絶対配置された div によって受信されたスクロール イベントをこの基になるスクロール可能な div に渡すかディスパッチして、この絶対配置された div をマウス ホイール イベントに対して「透明」にする方法。

Chrome では動作しましたが、IE と Firefox では動作しませんでした。このコードを書き直して IE と Firefox で動作させるにはどうすればよいですか?

if ($.browser.webkit) {    
    $(".overlap-container").bind("mousewheel", function (e) {

        var origEvent = e.originalEvent;
        var evt = document.createEvent("WheelEvent");
        evt.initWebKitWheelEvent(
        origEvent.wheelDeltaX,
        origEvent.wheelDeltaY,
        window,
        0,
        0,
        0,
        0,
        origEvent.ctrlKey,
        origEvent.altKey,
        origEvent.shiftKey,
        origEvent.metaKey);

        $(".scroll-container").get(0).dispatchEvent(evt);
    });
}

ここで例を参照してください: http://jsfiddle.net/HAc4K/5

編集:この問題はもともと jqGrid からのものです - フリーズした列はマウス ホイールのスクロールに反応しません。

Chrome と Firefox では、awesome CSS プロパティがサポートされています。pointer-events:none

4

5 に答える 5

3

簡単な答え: Internet Explorer を使用している場合、デモinitWheelEventで間違ったパラメーターを使用しています。このメソッドには、ドキュメントに記載されている 16 個のパラメーターが必要です。現在、 と同じ 11 個のパラメーターのみを使用していますが、 のすべてのパラメーターの意味はまったく異なります。のパラメータを修正する必要があります。initWebKitWheelEventinitWheelEventinitWheelEvent

于 2013-03-20T11:26:36.360 に答える
3

jQuery の既知の問題のようです: OriginalEvent は IE ではサポートされていません

于 2013-03-20T11:11:35.837 に答える
1

これはまさにあなたが探しているものではないことを認識していますが、少なくとも Chrome、IE7+、および Firefox 3.5+ では、これはあなたが求めていることを行います - オーバーレイしている div がスクロール イベントを受け取ったときに、基になる div をスクロールします。

http://jsfiddle.net/b9chris/yM3qs/

オーバーラップする div がオーバーラップする div の子であるため、単純にそうしています。マウスホイール イベントを渡す jquery はありません (ただし、オーバーラップする div が必要な場所にとどまるようにスクロールをリッスンしています)。

ただし、jqGrid でそのような回避策を実装するには、かなりの量のコードを修正する必要がある場合があります。

HTML:

<div id=under>
    (content goes here)
    <div id=over></div>
</div>

CSS:

#under {
    position: absolute;
    left: 0; top: 0;
    width: 220px; height: 200px;
    overflow-y: scroll;
}

#over {
    position: absolute;
    left: 1px; top: 100px;
    width: 200px; height: 100px;
    z-index: 2;
}

JS:

(function() {
    $('#under').on('scroll', function() {
        $('#over').css('top', $(this).scrollTop() + 100);
    });
})();
于 2013-03-31T21:39:43.243 に答える