web-dev-qa-db-ja.com

「スクロールダウン」イベントをキャプチャしますか？

私は非常に単純なWebページ（HTMLのみ）を設計していますが、実装したい「機能」は、ユーザーがページを下にスクロールしたときに何かをすることです。

javascripthtmleventsjavascript-eventsscroll
34
Artemix

完全を期すために、別のJSフレームワーク（Mootools）を使用する別のソリューションがあります

window.addEvent('scroll',function(e) {
    //do stuff
});
20
stecb

JQueryを使用したくない場合（非常に単純なHTMLページでは使用しない場合があります）、通常のJavascriptを使用してこれを実現できます。

<script>
function scrollFunction() {
    // do your stuff here;
}

window.onscroll = scrollFunction;
</script>

downページ-スクロールするときに何かをしたいということを述べました-onscrollイベントは、x軸またはy軸のいずれかの方向にスクロールを開始するので、関数はいつでも呼び出されます彼らはスクロールします。

ページを下にスクロールしたときにのみコードを実行したい場合は、onscrollが呼び出されるたびに比較するために、前のスクロール位置を保持する必要があります。

42
Anthony Grist

HTMLだけではできません。Javascriptを使用する必要があります。 jQuery を使用することをお勧めします。これにより、ソリューションは次のようになります。

$(document).ready(function() {
    $(window).scroll(function() {
      // do whatever you need here.
    });
});

jQuery を使用したくない、または使用できない場合は、Anthonyが投稿したonscrollソリューションを使用できます。

21
Chuck Callebs

より良い方法は、スクロールイベントだけでなく、以下のような方向スクロールもチェックすることです。

$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
    console.log('Scroll up');
}
else {
    console.log('Scroll down');
}
});
20
Joe Ng'ethe

単純にこれを使用できます

window.addEvent('scroll',function(e) {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
            // enter code here
        }
});
3
sajad saderi

これは私のために動作します。

var previousPosition

$(window).scroll(function(){
  var currentScrollPosition=$(window).scrollTop() + $(window).height()
  if (currentScrollPosition>previousScrollPosition) {
    console.log('down')
  }else if(currentScrollPosition<previousScrollPosition){
    console.log('up')
  }
  previousScrollPosition=currentScrollPosition
});
0
Alvin Lau