-1

Can I detect scrolling movement with JS or jQuery?

I'm trying to hide a div only when the user is scrolling, and when he stops scrolling the div shows.

I tried:

window.onscroll(function () {
  $('.footerGeral').hide();
});

However it does not work.

jribeiro
  • 27
  • 1
  • 3
  • Check this out --> http://stackoverflow.com/questions/5515551/how-to-call-a-function-after-scroll-has-ended <--- – Help Jan 04 '16 at 12:27
  • Surely this is different to https://stackoverflow.com/questions/3701311/event-when-user-stops-scrolling. @jribeiro wants the object to show once more when the user stops scrolling. – James Jensen Jun 01 '18 at 10:32

4 Answers4

1

You are almost right, but it is .scroll():

$(window).scroll(function () {
  $('.footerGeral').hide();
});

You can do this in pure JavaScript, this way:

window.onscroll = function () {
  document.querySelectorAll(".footerGeral")[0].style.display = 'none';
}

Note: This works only if you have content, that is more than the view. A page with scrollbars.

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
1

You'll probably want to use the scroll event, like so:

window.addEventListener('scroll', function(evt) {});

Now you can detect how many pixels the user has scrolled with evt.deltaX and evt.deltaY, or how much has totally been scrolled with document.body.scrollTop and document.body.scrollLeft.

Nebula
  • 6,614
  • 4
  • 20
  • 40
0

First: it only works if you actually have overflowing content (with a scrollbar). You will not get the event if you just scroll.

Second, the native syntax is:

window.onscroll = function () {
  // Your code
};

The jQuery approach is:

$(window).scroll(function () {
   // Your code
});
Bas Slagter
  • 9,831
  • 7
  • 47
  • 78
0

You can easily do this combining JQuery scroll() with debounce() from jquery.ba-throttle-debounce.js by Ben Alman.

$(window).scroll($.debounce( 250, true, function(){
    $('.footerGeral').hide(); //scrolling or scrolling stopped for less than 250 ms
}));
$(window).scroll($.debounce( 250, function(){
    $('.footerGeral').show(); //scrolling stopped for more than 250 ms
}));
Sasindu Mendis
  • 346
  • 2
  • 7