外側の要素のスクロールを無効にするにはどうすればよいですか？

Question

私はまた、縦方向にスクロールするページ内の垂直スクロールのdivを持っています。子div要素がマウスホイールをスクロールし、スクロールバーの上部または下部に達すると

、ページ（体が）スクロールを開始します。マウスが子divの上にある間、私はページ（ボディ）のスクロールをロックしたいと思います。

This SO post (scroll down to the selected answer)はよく問題を示しています。

This SO questionは本質的に私のものと同じですが、選択された回答によって、スクロールバーが消えて再び表示されるようになり、ページコンテンツが水平方向に顕著にシフトします。

私は）するevent.stopPropagationを（活用ソリューションがあるかもしれないと思ったが、動作するように何かを得ることができませんでした。 ActionScriptでは、body要素に到達する前にイベントのstopPropagation（）を呼び出す子divにmousewheelハンドラを配置することで、このようなことが解決されます。 JSとASはどちらもECMAScript言語なので、私はそのコンセプトが翻訳できると思ったが、うまくいかなかった。

周りにシフトするから私のページの内容を保持する解決策はありますか？ CSS修正ではなくstopPropagationを使用する可能性が最も高いですか？ JQueryの回答は純粋なJSのように歓迎されます。これについて

Answer 1

は、ここで私がなってしまったものです。 @ mrtshermanの回答hereと非常によく似ていますが、jQueryではなく純粋なJSイベントのみです。私はまだ子供のdivを選択して移動するためにjQueryを使いました。

// earlier, i have code that references my child div, as childDiv 

function disableWindowScroll() { 
    if (window.addEventListener) { 
     window.addEventListener("DOMMouseScroll", onChildMouseWheel, false); 
    } 
    window.onmousewheel = document.onmousewheel = onChildMouseWheel; 
} 

function enableWindowScroll() { 
    if (window.removeEventListener) { 
     window.removeEventListener("DOMMouseScroll", onArticleMouseWheel, false); 
    } 
    window.onmousewheel = document.onmousewheel = null; 
} 

function onChildMouseWheel (event) { 
    var scrollTgt = 0; 
    event = window.event || event; 
    if (event.detail) { 
     scrollTgt = -40 * event.detail; 
    } else { 
     scrollTgt = event.wheelDeltaY; 
    } 

    if (scrollTgt) { 
     preventDefault(event); 
     $(childDiv).scrollTop($(childDiv).scrollTop() - scrollTgt); 
    } 
} 

function preventDefault (event) { 
    event = event || window.event; 
    if (event.preventDefault) { 
     event.preventDefault(); 
    } 
    event.returnValue = false; 
} 

私はスクロールが通常のスクロールと正確に一致しないことに気付きました。このコードがない場合よりも少し速くスクロールするようです。私はwheelDeltaYをノックダウンして修正することができると仮定しますが、実際にはブラウザによって実際に実装されているよりもjavascriptによって違う方法で報告されることは奇妙です...

Answer 2

何：

div.onmousemove = function() { // may be onmouseover also works fine 
    document.body.style.overflow = "hidden"; 
    document.documentElement.style.overflow = "hidden"; 
}; 

div.onmouseout = function() { 
    document.body.style.overflow = "auto"; 
    document.documentElement.style.overflow = "auto"; 
}; 

Answer 3

私は通常スクロールイベントオートはまだうまくスクロールします：その後、

var scrollTop = $(document).scrollTop(); 
$(document).on('scroll.scrollLock', function() { 
    $(document).scrollTop(scrollTop); 
}); 

をし、私がして終わりだとき - ：文書に効果的にスクロールからの文書が、オーバーフローを持つ任意の内部要素を凍結し、それが元のものにスクロール高さをリセット内側スクロールロック：

$(document).off('scroll.scrollLock'); 

.scrollLockイベント名前空間は、スクロール時に他のイベントリスナーが邪魔にならないようにします。

Answer 4

これは古い質問ですが、ここではjQueryを使って説明します。これにより、外側のリスト内のリストをスクロールすることができます。または、OPに要請したことを行うために外側のリストをドキュメントに変更することができます。

window.scrollLockHolder = null; 
function lockScroll(id){ 
    if (window.scrollLockHolder == null){ 
     window.scrollLockHolder = $('#' + id).scrollTop(); 
    } 
    $('#' + id).on('scroll', function(){ 
     $('#' + id).scrollTop(window.scrollLockHolder); 
    }); 
} 
function unlockScroll(id){ 
    $('#' + id).off('scroll'); 
    window.scrollLockHolder = null; 
} 

そして、あなたはこのようにそれを使用することができます：

<ul onmousemove="lockScroll('outer-scroller-id')" onmouseout="unlockScroll('outer-scroller-id')"> 
    <li>...</li> 
    <li>...</li> 
</ul>