0

ウィンドウ スクロール機能を使用して、カーソルが HTML 要素の上部にあることを確認する方法はありますか。

編集:カーソルが1つのdivの上部にある場合、ウィンドウのスクロール機能を一時停止するには、以下のスクリプトを呼び出す必要があります:

document.addEventListener('DOMMouseScroll', function(e){
   console.log(e);
   e.stopPropagation();
   e.preventDefault();
   e.cancelBubble = false;
   return false;
}, false);
4

1 に答える 1

1

マウス カーソルが特定の要素の上に (ホバーされている) 場合にスクロールが発生しないようにする場合は、指定した関数を使用して条件を追加し、フラグが設定されていない場合にのみ DOMMouseScroll イベントがキャンセルされるようにします。

var allowScroll = true;

$("div.noscroll").hover(function() {
    allowScroll = false;
}, function() {
    allowScroll = true;
});

document.addEventListener('DOMMouseScroll', function(e) {
    if (!allowScroll) {
        console.log(e);
        e.stopPropagation();
        e.preventDefault();
        e.cancelBubble = false;
        return false;
    }
}, false);

デモ: http://jsfiddle.net/WSQbp/

質問に「jquery」のタグを付けたので、jQuery を使用して、フラグを管理するホバー ハンドラーをセットアップしました。jQuery を使用して DOMMouseScroll ハンドラーをセットアップすると、コードをさらに簡素化できます。

$(document).on('DOMMouseScroll', function() {
    if (!allowScroll)
        return false;
});

デモ: http://jsfiddle.net/WSQbp/1/

于 2012-07-02T06:45:16.213 に答える