フォーカスがdivにあり、divをスクロールしてオーバーフローを再度有効にしたときに、ボディスクロールが無効になる：

Question

私はスクロール可能な<div>を私の体内にスクロールできます。しかし、divがtop/bottomに達すると、ページ全体がスクロールし始めます。これは望ましくありません。

私はdivタグの内側に次のものを含むことにより、スクロールから体を停止するために管理している

：私は、ユーザーがフォーカス場合は、本体をスクロールできるようにしたいから、

onmouseover="document.body.style.overflow='hidden';" 
onmouseout="document.body.style.overflow='auto';"` 

この作品の大部分はスクロール可能div内にありません。

問題は、divからマウスカーソルを離すと（つまり、ボディオーバーフローが再びautoに設定されるように）、スクロールイベントがあるかのようにボディがスクロールし始めるスクロール可能divから（ボディへの）遅延伝播。

私は初心者のウェブ開発者ですが、何か助けていただければ幸いです。

は、だから私は（スニペットを参照）問題を再現しようとしたが、FirefoxとChromeの両方でそれを行うことができませんでしたあなたに

Answer 1

ありがとうございます。問題を再現できるスニペットを作成できますか？どのブラウザを使用していますか？

div.first { 
 
    height: 200vh; 
 
} 
 
div.first > div { 
 
    height: 70vh; 
 
    overflow: scroll; 
 
} 
 
div.first > div > div { 
 
    background: orange; 
 
    height: 200vh; 
 
    width: 300px; 
 
} 
 
div { 
 
    display: inline-block; 
 
    margin-right: 300px; 
 
}

<div class="first"> 
 
    <div onmouseover="document.body.style.overflow='hidden';" 
 
onmouseout="document.body.style.overflow='auto';"> 
 
    <div>test</div> 
 
    </div> 
 
</div>

言われていること、あなたがまだスクロールしているときにスクロール可能なdiv要素の外にカーソルを移動すると、多分あなたの問題が発生します。下のスクリプトでは、onmouseout="setTimeout(function(){ document.body.style.overflow='auto'; }, 500);"を設定します。これは、カーソルがdivを離れると、本体が再びスクロールされる前にタイムアウトが0.5秒に始まることを意味します。

div.first { 
 
    height: 200vh; 
 
} 
 
div.first > div { 
 
    height: 70vh; 
 
    overflow: scroll; 
 
} 
 
div.first > div > div { 
 
    background: orange; 
 
    height: 200vh; 
 
    width: 300px; 
 
} 
 
div { 
 
    display: inline-block; 
 
    margin-right: 300px; 
 
}

<div class="first"> 
 
    <div onmouseover="document.body.style.overflow='hidden';" 
 
onmouseout="setTimeout(function(){ document.body.style.overflow='auto'; }, 500);"> 
 
    <div>test</div> 
 
    </div> 
 
</div>