javascript - Google Chrome の縦スクロールバグ

Question

jsフィドル

Google Chrome でdiv を縦スクロールしようとするとchild、最後にたどり着き、スクロールを続けようとすると div もスクロールされてしまいますがparent、これは Mozilla では起こりません。修正方法は？

Answer 1

これが私が達成できる最善の解決策だと思います（スクロールイベントとホイールが両方をトリガーしていることを理解するのに1時間かかりました）：

スクローラーの位置を保持するためにフラグ変数を使用しました。私はjqueryを使用していましたが、あなたが純粋なjavascriptを要求したというコメントから今気づきました。とにかく、jquery はネイティブの JavaScript に基づいているので、後で回答を編集して純粋なコードに変換します。

それがあなたにとって十分であることを確認してください。翻訳します。

JavaScript コード:

var isCanceled = false;
var currentPos = $(".parent").scrollTop();
var stopWheelTimer = undefined;

$(".child").on('mousewheel', function (event) {
    clearTimeout(stopWheelTimer);
    event.stopPropagation();
    isCanceled = true;
    currentPos = $(".parent").scrollTop();
    stopWheelTimer = setTimeout(function(){
        isCanceled = false;        
    }, 250);

});
$(".parent").on('mousewheel', function (elem) {
   if(isCanceled)
   {
       $(elem.target).scrollTop(currentPos);
   }
}); 
$(".parent").on('scroll', function (elem) {
   if(isCanceled)
   {
       $(elem.target).scrollTop(currentPos);
    }
});

作業例:
jsFiddle