web-dev-qa-db-ja.com

スクロール方向を検出する方法

誰かが要素を下にスクロールしたときに関数を実行したい。このようなもの：

 $('div').scrollDown(function(){ alert('down') });
 $('div').scrollUp(function(){ alert('up') });

しかし、それらの機能は存在しません。この問題の解決策はありますか？ 彼ら はそれができるようです。残念ながら、ソースコードは圧縮されているため、運がありません...

ありがとう!!

jqueryscrolldirection
57
Rik de Vos

私は最終的にそれを理解することができたので、誰かが答えを探しているなら：

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });
105
Rik de Vos

次の例は、マウススクロールのみをリッスンし、タッチスクロールもトラックパッドスクロールもリッスンしません。

jQuery.on（） を使用します（jQuery 1.7以降、.on（）メソッドは、イベントハンドラーをドキュメントに添付するための推奨メソッドです）。

$('#elem').on( 'DOMMouseScroll mousewheel', function ( event ) {
  if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
    //scroll down
    console.log('Down');
  } else {
    //scroll up
    console.log('Up');
  }
  //prevent page fom scrolling
  return false;
});

すべてのブラウザで動作します。

フィドル： http://jsfiddle.net/honk1/gWnNv/7/

49
honk31

これは更新に値します-最近ではwheelイベントがあります：

$(function() {

$(window).on('wheel', function(e) {

        var delta = e.originalEvent.deltaY;

        if (delta > 0) $('body').text('down');
        else $('body').text('up');

        return false; // this line is only added so the whole page won't scroll in the demo
});
});
body {
  font-size: 22px;
  text-align: center;
  color: white;
  background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

かなり長い間、最新のブラウザでのサポートはかなり良好です：

  • Chrome 31+
  • Firefox 17以降
  • IE9 +
  • Opera 18+
  • Safari 7以降

https://developer.mozilla.org/en-US/docs/Web/Events/wheel

より深いブラウザのサポートが必要な場合、おそらく次のことをする代わりにmousewheel.jsを使用するのが最善です：

https://plugins.jquery.com/mousewheel/

$(function() {

$(window).mousewheel(function(turn, delta) {

        if (delta > 0) $('body').text('up');
        else $('body').text('down');

        return false; // this line is only added so the whole page won't scroll in the demo
});
});
body {
  font-size: 22px;
  text-align: center;
  color: white;
  background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
40
Shikkediel

既存のソリューション

あるかもしれない 3ソリューション この投稿と その他のstackoverflow記事 から。

解決策1

    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log('up 1');
        }
        else {
            console.log('down 1');
        }
        lastScrollTop = st;
    });

解決策2

    $('body').on('DOMMouseScroll', function(e){
        if(e.originalEvent.detail < 0) {
            console.log('up 2');
        }
        else {
            console.log('down 2');
        }
    });

解決策3

    $('body').on('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log('up 3');
        }
        else {
            console.log('down 3');
        }
    });

マルチブラウザテスト

Safariでテストできませんでした

クローム42（Win 7）

  • 解決策1
    • Up：1スクロールにつき1イベント
    • Down：1スクロールにつき1イベント
  • Soltion 2
    • Up：動作していません
    • ダウン：動作していません
  • 解決策3
    • Up：1スクロールにつき1イベント
    • Down：1スクロールにつき1イベント

Firefox 37（Win 7）

  • 解決策1
    • Up：1スクロールあたり20イベント
    • ダウン：1スクロールあたり20イベント
  • Soltion 2
    • Up：動作していません
    • Down：1スクロールにつき1イベント
  • 解決策3
    • Up：動作していません
    • ダウン：動作していません

IE 11（Win 8）

  • 解決策1
    • 上：1スクロールあたり10イベント（副作用：下スクロールが最後に発生しました）
    • ダウン：1スクロールあたり10イベント
  • Soltion 2
    • Up：動作していません
    • ダウン：動作していません
  • 解決策3
    • Up：動作していません
    • Down：1スクロールにつき1イベント

IE 10（Win 7）

  • 解決策1
    • Up：1スクロールにつき1イベント
    • Down：1スクロールにつき1イベント
  • Soltion 2
    • Up：動作していません
    • ダウン：動作していません
  • 解決策3
    • Up：1スクロールにつき1イベント
    • Down：1スクロールにつき1イベント

IE 9（Win 7）

  • 解決策1
    • Up：1スクロールにつき1イベント
    • Down：1スクロールにつき1イベント
  • Soltion 2
    • Up：動作していません
    • ダウン：動作していません
  • 解決策3
    • Up：1スクロールにつき1イベント
    • Down：1スクロールにつき1イベント

IE 8（Win 7）

  • 解決策1
    • Up：1スクロールあたり2イベント（副作用：最後に下スクロールが発生しました）
    • ダウン：1スクロールあたり2〜4イベント
  • Soltion 2
    • Up：動作していません
    • ダウン：動作していません
  • 解決策3
    • Up：1スクロールにつき1イベント
    • Down：1スクロールにつき1イベント

複合ソリューション

IE 11およびIE 8の副作用がif elseステートメントに由来することを確認しました。そこで、次のようにif else ifステートメントに置き換えました。

マルチブラウザテストから、私は使用することにしました 解決策3 一般的なブラウザと 解決策1 FirefoxおよびIEの場合11。

this answer を参照して、IE 11.を検出しました。

    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.$1);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== 'undefined' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on('scroll', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log('Up');
            }
            else if(st > lastScrollTop) {
                console.log('Down');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $('body').on('mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log('Up');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log('Down');
            }
        });
    }
22
Chemical Programmer
$(function(){
    var _top = $(window).scrollTop();
    var _direction;
    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        if(_top < _cur_top)
        {
            _direction = 'down';
        }
        else
        {
            _direction = 'up';
        }
        _top = _cur_top;
        console.log(_direction);
    });
});

デモ： http://jsfiddle.net/AlienWebguy/Bka6F/

9
AlienWebguy
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$(document).bind(mousewheelevt, 
function(e)
    {
        var evt = window.event || e //equalize event object     
        evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
        var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF
        if(delta > 0) 
            {
            scrollup();
            }
        else
            {
            scrolldown();
            }   
    }
);
0
Jithin U. Ahmed

この簡単なプラグインを使用して、scrollUpとscrollDownをjQueryに追加できます。

https://github.com/phpust/JQueryScrollDetector

var lastScrollTop = 0;
var action = "stopped";
var timeout = 100;
// Scroll end detector:
$.fn.scrollEnd = function(callback, timeout) {    
      $(this).scroll(function(){
        // get current scroll top 
        var st = $(this).scrollTop();
        var $this = $(this);
        // fix for page loads
        if (lastScrollTop !=0 )
        {
            // if it's scroll up
            if (st < lastScrollTop){
                action = "scrollUp";
            } 
            // else if it's scroll down
            else if (st > lastScrollTop){
                action = "scrollDown";
            }
        }
        // set the current scroll as last scroll top
        lastScrollTop = st;
        // check if scrollTimeout is set then clear it
        if ($this.data('scrollTimeout')) {
          clearTimeout($this.data('scrollTimeout'));
        }
        // wait until timeout done to overwrite scrolls output
        $this.data('scrollTimeout', setTimeout(callback,timeout));
    });
};

$(window).scrollEnd(function(){
    if(action!="stopped"){
        //call the event listener attached to obj.
        $(document).trigger(action); 
    }
}, timeout);
0
user122293

サンプルはこちら 簡単な方法を示しています。スクリプトは次のとおりです。

$(function() {
  var _t = $("#container").scrollTop();
  $("#container").scroll(function() {
    var _n = $("#container").scrollTop();
    if (_n > _t) {
      $("#target").text("Down");
    } else {
      $("#target").text("Up");
    }
    _t = _n;
  });
});

#containerはdiv idです。 #targetは、動作を確認するためのものです。起動時または停止時に必要なものに変更します。

編集

OPは以前は言いませんでしたが、彼はoverflow: hiddenでdivを使用しているため、スクロールは発生しません。そのため、スクロールを検出するスクリプトは最も少なくなります。さて、発生しないものを検出する方法は？

だから、OP自身が彼が望むものとのリンクを投稿したので、なぜそのライブラリを使用しないのですか？ http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js 。

呼び出しはただです：

$(function() {
    $(".scrollable").scrollable({ vertical: true, mousewheel: true });
});
0
Erick Petrucelli