detect mouse scroll only once

Question

How to detect scroll only once per user request. My first attempt looks like this:

$(window).bind('mousewheel', function(event) {
console.log("hello")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://www.setaswall.com/wp-content/uploads/2017/10/Beautiful-Wallpaper-1080x2160.jpg"></image>

The problem with the above code is that when the user scrolls the function doesnt fires continuesly rather than just detecting it once and printing the console.log once.

My second attempt:

$(this).one('scroll', function(){
        // scroll 
 console.log("hello")
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://www.setaswall.com/wp-content/uploads/2017/10/Beautiful-Wallpaper-1080x2160.jpg"></image>

The problem with the second attempt is that the function fires only one time unless the page is refreshed.

How can I make my second attempt better so that it detects more than one time without refreshing the page? If I scroll down I want hello to be displayed only once and when I scroll up again I want hello to be displayed once again

Possible duplicate of [jQuery bind/unbind 'scroll' event on $(window)](https://stackoverflow.com/questions/4154952/jquery-bind-unbind-scroll-event-on-window) — Kaique Garcia, Apr 27 '18 at 05:33
the first attempt is right. You should just do `$(this).unbind("mousewheel");` when you done (inside the function). — Kaique Garcia, Apr 27 '18 at 05:35

score 2 · Answer 1 · answered Apr 27 '18 at 05:35

2

Set the scroll eventListener and then unbind it on scroll:

$(window).on("scroll", function(e){
  console.log("only alerting once");
  $(window).unbind("scroll");
});

answered Apr 27 '18 at 05:35

Fecosos

944
7
17

It fires multiple times, in my case `console.log` is executed 22 times before 'unbind' method – Luca Detomi Jul 07 '20 at 07:03

Charlie Martin · Answer 2 · 2018-04-27T20:09:31.710

1

var currentScrollTop = 0,
    previousScrollDir = true;

$(this).scroll(function () {
    var scrollTop = $(this).scrollTop();
    if (scrollTop < currentScrollTop) {
        if (!previousScrollDir) {
          console.log('scrolled up');
          previousScrollDir = true;
        }
    } else {
        if (previousScrollDir) {
          console.log('scrolled down');
          previousScrollDir = false;
        }
    }
    currentScrollTop = scrollTop;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://www.setaswall.com/wp-content/uploads/2017/10/Beautiful-Wallpaper-1080x2160.jpg"></image>

edited Apr 27 '18 at 20:09

answered Apr 27 '18 at 05:48

Charlie Martin

8,208
3
35
41

Im looking to get it work more than that - as long as the users scrolls – Apr 27 '18 at 15:31
one last thing before I mark it as the right answer. Is it possible to make console.log when scroll the same direction more than one time. Like if I scroll down I should get scroll down console.log and if I scroll down again I should get scroll down console.log agian – Apr 27 '18 at 23:51
That's exactly what it does right now. I don't know what you are asking. – Charlie Martin Apr 28 '18 at 05:06
if I scroll down it says "scrolled down". After it stops scrolling, if I scroll down again it does not say scrolled down again – Apr 28 '18 at 18:35
You should clarify your question. That comment directly contradicts the question, which says "If I scroll down I want hello to be displayed only once and when I scroll up again I want hello to be displayed once again". – Charlie Martin Apr 30 '18 at 15:29

detect mouse scroll only once

2 Answers2