無効マウスホイール

Question

私はワードプレスサイトを使用しています。メニューバーを作成し、サブメニューの中にposition:fixed要素を使用しました。誰も私はどのようにサブメニューのマウスホイールを無効にすることができます私に教えてください。つまり、私はそのサブメニューの中でページスクロールをしたくないということです。

誰も私を助けてください。例えば

$("sub-menu-selector").bind("wheel mousewheel", function() { 
    return false; 
}); 

：

Answer 1

次のコードでこれを行うことができます（例では、メニューの無効化を示していますが、それはまったく同じです）

$(".menu").bind("wheel mousewheel", function() { 
 
    return false; 
 
});

body { 
 
    margin:0; 
 
} 
 

 
.menu { 
 
    background:black; 
 
    color:#fff; 
 
    position:fixed; 
 
    width:100%; 
 
    padding:15px; 
 
} 
 

 
.content { 
 
    height:1500px; 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    Menu 
 
</div> 
 
<div class="content"></div>

Answer 2

を

CSSのプロパティoverflow: hidden;を使用すると、コンテンツが要素のボックスをオーバーフローするとどうなるかを指定できます。使用overflow: hidden;

を使用すると、スクロールバーが表示されませんすることができますので、すべてを含むマウスみみず腫れでスクロールできません。

ここでは非常に一般的な例以下、あなたの本当のアプリのコードを修正するためにあなたの質問にあなたの本当のマークアップを追加することを検討してください。マウスホイールイベントでスクロールしている要素は、本体、あるいは他のいくつかの要素である場合

https://jsfiddle.net/bxohL8tt/2/

#sub-menu{ 
    width:250px; 
    height: 100px; 
    background-color:red; 
    overflow: hidden; 
} 

Answer 3

、あなたのメニューは、「フォーカス」などを持っていながら、スクロールからそれを防ぐために、JavaScriptを使用することができますこの：

var menuBar = document.getElementById('menuBar'); 

menuBar.onmouseover = function() 
{ 
    document.body.style.overflow = 'hidden'; 
}; 

menuBar.onmouseout = function() 
{ 
    document.body.style.overflow = 'auto'; 
}; 

は、あなたのメインのHTMLソースコードの末尾に<script>要素内に上記を追加し、それが動作するはずです。