ユーザーがスクロールしているかどうかを検出します


85

ユーザーがスクロールしているかどうかをJavaScriptで検出するにはどうすればよいですか?


いいえ、別の関数から書き込みたいですif(scolling)。あるif(window.onscroll)同じ?
user1365010 2012年

あなたは、設定することができますscrollingonscroll。(ps:いいえ、それは同じではありません)
ロケット危険物2012年

3
ユーザーが「スクロールしている」ことはありません。スクロールアクションのみがあり、スクロール状態はありません。
ケンダルフレイ

1
@ user1365010:D'OH!私はそれを考えていませんでした。あなたは正確に何をしようとしていますか?ユーザーがスクロールしているかどうかを知る必要があるのはなぜですか?
ロケット危険物2012年

2
面白い。巻物を「再起動」したことはありません。気になりますか?
ケンダルフレイ2012年

回答:


87

これは機能します:

window.onscroll = function (e) {  
// called when the window is scrolled.  
} 

編集:

これはTimeIntervalの関数だとおっしゃいました。次の
ようにしてみてください。

userHasScrolled = false;
window.onscroll = function (e)
{
    userHasScrolled = true;
}

次に、インターバル内にこれを挿入します。

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}

しかし、それはsetIntervalの関数です!
user1365010 2012年

4
@ user1365010:何ですか?あなたは何について話していますか?質問にさらに詳細を追加する必要があります。
ロケット危険物2012年

6
@ user1365010この答えは(本質的に)あなたができる最善のことです。
マットボール

#FYI、コンテナがスクロールしているときは目覚めないようで、body.scroll()が機能するので、両方を追加しました
Selva Ganapathi

12

タグでJavaScriptと言ったので、@ WampieDriessenの投稿が役に立ちます。

私も貢献したいので、必要に応じてjQueryを使用するときに以下を使用できます。

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.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.wheelDelta< 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

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

もう一つの例:

$(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);
    });
});​

2
jQueryはブラウザの違いを抽象化することになっているのではありませんか?なぜ異なるブラウザ用のメソッドがあるのですか?$('#elem').bind('scroll'十分ではありませんか?編集:気にしないでください、私はあなたの2番目の例を見ました。
ロケット危険物2012年

1
時々、小さなネイティブJavaScriptで何も問題はありません。
AGDM 2014

意味ないですe.originalEvent.wheelDelta || e.originalEvent.detailか?
JacobRossDev 2016年

2
警告:この回答のホイールイベントは非標準であり、非推奨です。wheelイベントを使用します。
アレクサンダーオマラ2016

私はこれをテストしていませんが、MDNによると、DOMMouseScrollはほとんどのブラウザでサポートされていませんdeveloper.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll
Liron Yahdav 2017年

6
window.addEventListener("scroll",function(){
    window.lastScrollTime = new Date().getTime()
});
function is_scrolling() {
    return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
}

500を、ユーザーが「スクロールしなくなった」と見なす最後のスクロールイベントからのミリ秒数に変更します。

(前者はを使用する他のコードとうまく共存できるため、addEventListenerより優れonScrollていますonScroll。)


0

間隔を使用して確認します

ユーザーがスクロールしたかどうかを確認し続ける間隔を設定し、それに応じて何かを行うことができます。

彼の記事で偉大なジョン・レシグから借りています

例:

    let didScroll = false;

    window.onscroll = () => didScroll = true;

    setInterval(() => {
        if ( didScroll ) {
            didScroll = false;
            console.log('Someone scrolled me!')
        }
    }, 250);

実例を見る

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.