Detect if user is scrolling

Question

How can I detect in javascript if the user is scrolling?

No, I want from another function to write `if(scolling)`. Is `if(window.onscroll)` the same ? — user1365010, May 15 '12 at 16:40
You can set `scrolling` in the `onscroll`. (p.s.: no, that's not the same) — gen_Eric, May 15 '12 at 16:41
The user never 'is scrolling'. There is only a scroll action, not a scroll state. — Kendall Frey, May 15 '12 at 16:43
I tryed to set `scrolling` in the `onscroll` but `scrolling` will always be `true`. When do I remake it `false`? — user1365010, May 15 '12 at 16:44
@user1365010: D'OH! I didn't think of that. What exactly are you trying to do? Why do you need to know if the user is scrolling? — gen_Eric, May 15 '12 at 16:45
Because I want to stop the scroll of the user if he pass on a certain `div` then after 2 seconds reboot the scroll. But if I write `onmousemove="stopscroll();"`, I must not reboot the scroll if he wasn't scrolling. — user1365010, May 15 '12 at 16:48
Interesting. I have never 'rebooted' a scroll. Care to elaborate? — Kendall Frey, May 15 '12 at 16:49
@user1365010 it sounds like you're trying to rewrite something that's already been done many times before: https://www.google.com/search?q=javascript+animate+scroll — Matt Ball, May 15 '12 at 16:56
See [Javascript - Detecting scroll direction](http://stackoverflow.com/questions/31223341/javascript-detecting-scroll-direction) — Ronnie Royston, Mar 25 '17 at 01:46

Wampie Driessen · Accepted Answer · 2012-05-15T17:16:47.863

94

this works:

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

edit:

you said this is a function in a TimeInterval..
Try doing it like so:

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

then inside your Interval insert this:

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

edited May 15 '12 at 17:16

answered May 15 '12 at 16:40

Wampie Driessen

1,549
11
17

But it's a function in a setInterval! – user1365010 May 15 '12 at 16:41
4

@user1365010: What is? What are you talking about? You need to add more detail to the question. – gen_Eric May 15 '12 at 16:42
6

@user1365010 this answer is (at its core) the best you can do. – Matt Ball May 15 '12 at 16:46
#FYI, its seems not woking when the container was scrolling, body.scroll() works, so I added both, – Selva Ganapathi Feb 13 '20 at 07:02

score 12 · Answer 2 · answered May 15 '12 at 16:58

12

You just said javascript in your tags, so @Wampie Driessen post could helps you.

I want also to contribute, so you can use the following when using jQuery if you need it.

 //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;
 });

Another example:

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

answered May 15 '12 at 16:58

Oscar Jara

13,805
10
60
93

2

Isn't jQuery supposed to abstract out browser differences? Why do you have methods for different browsers? Is `$('#elem').bind('scroll'` not good enough? EDIT: Never mind, I saw your 2nd example. – gen_Eric May 15 '12 at 17:07
1

nothing wrong with a little native javascript every now and then. – AGDM Sep 20 '14 at 00:16
Don't you mean `e.originalEvent.wheelDelta || e.originalEvent.detail` ? – JacobRossDev Jan 23 '16 at 20:30
3

**WARNING:** The wheel events in this answer are nonstandard and deprecated. Use the `wheel` event. – Alexander O'Mara Jul 30 '16 at 22:04
I haven't tested this but according to MDN DOMMouseScroll isn't supported in most browsers https://developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll – Liron Yahdav May 19 '17 at 00:17

score 7 · Answer 3 · answered Sep 19 '18 at 21:36

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

Change the 500 to the number of milliseconds after the last scroll event at which you consider the user to be "no longer scrolling".

(addEventListener is better than onScroll because the former can coexist nicely with any other code that uses onScroll.)

score 4 · Answer 4 · answered Feb 23 '21 at 02:27

If you want detect when user scroll over certain div, you can do something like this:

window.onscroll = function() {
    var distanceScrolled = document.documentElement.scrollTop;
    console.log('Scrolled: ' + distanceScrolled);
}

For example, if your div appear after scroll until the position 112:

window.onscroll = function() {
    var distanceScrolled = document.documentElement.scrollTop;
    if (distanceScrolled > 112) {
      do something...
    }
}

But as you can see you don't need a div, just the offset distance you want something to happen.

score 0 · Answer 5 · answered Nov 28 '19 at 10:21

Use an interval to check

You can setup an interval to keep checking if the user has scrolled then do something accordingly.

Borrowing from the great John Resig in his article.

Example:

    let didScroll = false;

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

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

See live example

Detect if user is scrolling

5 Answers5

Use an interval to check

Linked

Related