オーバーフロー時のスクロールイベント：非表示要素

Question

オーバーフローのある要素でスクロールイベントをキャッチする方法についての洞察はありますか？私は、ユーザーにスクロールバーを表示せずに列をスクロールしたいと思います。

Answer 1

これは実際には多少のプロセスです。私がしているのは、ユーザーのマウスがスクロールしたい要素に入ったり出たりしたときにグローバルフラグを設定することです。次に、ボディのマウスホイールイベントで、MOUSE_OVERフラグがtrueであるかどうかを確認し、イベントの伝播を停止します。これは、ページ全体がオーバーフローした場合に本体がスクロールしないようにするためです。

オーバーフローを隠すと、デフォルトのスクロール機能が失われるため、自分で作成する必要があります。これを行うには、対象のdivにマウスホイールリスナーを設定し、event.wheelDeltaプロパティを使用して、ユーザーがスクロールしているかどうかを確認します。この値はブラウザによって異なりますが、スクロールダウンの場合は通常負で、スクロールアップの場合はプラスです。それに応じてdivの位置を変更することができます。

私にとって

var MOUSE_OVER = false; 
$('body').bind('mousewheel', function(e){ 
    if(MOUSE_OVER){ 
    if(e.preventDefault) { e.preventDefault(); } 
    e.returnValue = false; 
    return false; 
    } 
}); 

$('#myDiv').mouseenter(function(){ MOUSE_OVER=true; }); 
$('#myDiv').mouseleave(function(){ MOUSE_OVER=false; }); 

$('#myDiv').bind('mousewheel', function(e){ 
    var delta = e.wheelDelta; 
    if(delta > 0){ 
    //go up 
    } 
    else{ 
    //go down 
    } 
}); 

Answer 2

私はoverflow：scrollを使用しますが、スクロールバーを非表示にするためにdivを絶対配置してください。

Answer 3

$("body").css("overflow", "hidden") 

$(document).bind('mousewheel', function(evt) { 
    var delta = evt.originalEvent.wheelDelta 
    console.log(delta) 
}) 

作品...このコードはすぐにハッキングされていますが、基本的に次のようになります。 How do I get the wheelDelta property?

Answer 4

$("div").on('wheel', function (e) { 
     if (e.originalEvent.deltaY < 0) { 
     console.log("Scroll up"); 
    } else { 
     console.log("Scroll down"); 
    } 
}); 

これは私のためのトリックでした。 JSFiddle

StackFiddle：

$("div").on('wheel', function(e) { 
 
    if (e.originalEvent.deltaY < 0) { 
 
    console.log("Scroll up"); 
 
    } else { 
 
    console.log("Scroll down"); 
 
    } 
 
});

div { 
 
    height: 50px; 
 
    width: 300px; 
 
    background-color: black; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div></div>