スクロールイベントの前に行動する方法はありますか？

Question

は、だから私は、トリガイベントがスクロールであれば

e.preventDefault() 
e.stopPropagation(); 
return false; 

が

しかし、とにかく点火順序のスクロールイベントを「打つ」にあり、何もしないことを発見しましたか？

body{ 
    width: 100%; 
    height: 2000px; 
} 

$(document).on('scroll', function(e){ 
    $('body').css('overflow','hidden'); 
    setTimeout(function(){ 
     $('body').css('overflow','auto') 
    },100) 
}); 

上記のコードは動作しません、オーバーフローする前にイベントトリガが起動するが、文書のスクロールは、一つ一つの時間を隠されています。しかし、イベントが伝播する前にオーバーフローを隠すことができれば、これは機能します。

これは可能ですか？

スクロールを防止するだけではなく、スクロールイベントで要素の位置を実際に移動させることに興味があります。 Firefoxでは目に見えないものがありますが、クローム（特にIE）ではスクロール後に明らかに動きます。

Answer 1

あなたは次のイベントに処理する必要があります。

• ホイール（あなたがマウスホイールを使用）
• （あなたがスクロールするドキュメントのスクロールバーをクリックしてください）マウスダウンを
• のkeydown（CTRL +ホーム、CTRL + HEND、ダウンアップ矢印、pgdownとPGUP：キーボードがスクロール）あなたがscrolliを停止する必要がある場合

それでは、preventDefaultを追加すれば十分です。

これらは、スクロールイベントの前に発生します。

スニペット：

$(document).on('wheel mousedown keydown', function(e){ 
 
    if (e.type == 'wheel' || e.target.tagName == 'HTML' || 
 
     (e.type == 'keydown' && ((e.ctrlKey && (e.keyCode == 36 || e.which == 35)) || 
 
           (!e.ctrlKey && (e.keyCode == 33 || e.which == 34 || e.which == 38|| e.which == 40)))) 
 
    ) { 
 
    console.log(e.type + ' event'); 
 

 
    //you may want to prevent the scroll: add next line + return; 
 
    // 
 
    //e.preventDefault(); 
 
    $('body').css('overflow','hidden'); 
 
    setTimeout(function(){ 
 
     $('body').css('overflow','auto') 
 
    },100) 
 
    } 
 
});

body{ 
 
    width: 100%; 
 
    height: 2000px; 
 
}

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

Answer 2

私はあなたの質問を完全に理解しているかどうかわかりません。ユーザーがスクロールしようとする瞬間にスクロールを無効にしますか？まあ、デフォルトでは、マウスホイールをスクロールするだけで、ブラウザーは114pxでスクロールするようです。だから、おそらく私たちはそれをマウスホイールのイベントでこの量だけウィンドウをスクロールします。スクロールを禁止する場合は、ウィンドウを特定のスクロール位置にとどめて$(window).scrollTop(myvalue)にすることができます。例：

var currpos = $(window).scrollTop(); 
$(document).on('scroll', function(e){ 
    $('body').css('overflow','hidden'); 
    $(window).scrollTop(currpos); 
    setTimeout(function(){ 
     $('body').css('overflow','auto') 
    },100) 
});