How to limit the scrolling of the mouse wheel to only the 1st event, in my case, this alert(way) ?

The fact is that when the mouse wheel is scrolling, several alert (events) occur at once, you can see for yourself with this example:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var tempScrollTop,currentScrollTop = 0; var way = "default"; // направление $(window).scroll(function() { currentScrollTop = $(window).scrollTop(); if (tempScrollTop < currentScrollTop) { way= "down"; // крутнули вниз колесо } else if (tempScrollTop > currentScrollTop) { way= "up"; // крутнули вверх колесо } tempScrollTop = currentScrollTop; alert(way); }); }); </script> </head> <body> <style> body { height: 3000px; } </style> </body> </html>

Is it possible how to adjust this, so that on 1-scrolling only 1 event worked, i.e. 1 alert ?

if possible, if anyone entered or creak works correctly, try to open in IE 8, you will understand what's wrong.

NDA ... something did not work out for me, I will tell you more about the global task: there is a slider that works on a scroll, scrolls to the desired anchor, all this applies to IE, in particular to its 8th version, since I'm not testing it on others, now it looks like this:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="underscore-min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var tempScrollTop,currentScrollTop = 0; var way = "default"; // array of the anchors var jak = new Array("jak1","jak2","jak3","jak4"); i = 0; // scroll to id function goToByScroll(id) { $('html,body').animate({scrollTop: $("#"+id).offset().top},"fast"); } $(window).scroll(function() { currentScrollTop = $(window).scrollTop(); if (tempScrollTop < currentScrollTop) { way= "down"; i++; } else if (tempScrollTop > currentScrollTop) { way= "up"; i--; } tempScrollTop = currentScrollTop; if (i<0) { ++i; } if (i>=4){ --i; } // so, we go the current anchor goToByScroll(jak[i]); }); }); </script> </head> <body> <style> html,body { width: 100%; height: 100%;} div { margin: 0 auto; border: 1px solid; width: 500px; height: 100%; text-align: center; } </style> <div id="jak1">1</div> <div id="jak2">2</div> <div id="jak3">3</div> <div id="jak4">4</div> </body> </html>

Alas, this is a non-working option, although the ideology is correct, I can’t use normal animation without a scrollbar, it’s because the phones won’t work, idiocy may be, but I don’t see any other options.

    2 answers 2

    I'm not sure that I understood correctly, but I made such a variant , where the function should work once when the scrolling direction changes. (With an alert on fiddle bilya, therefore, the result brought to div)

     var tempScrollTop,currentScrollTop = 0; var check_way = true; var way = "default"; // направление function showWay(str){ $('div').text(str).fadeIn(300,function(){ $('div').fadeOut(500); }); } $(window).scroll(function(){ currentScrollTop = $(window).scrollTop(); if (tempScrollTop < currentScrollTop){ way= "down"; // крутнули вниз колесо if(check_way){ check_way = false; showWay(way); } } else if (tempScrollTop > currentScrollTop){ way= "up"; // крутнули вверх колесо if(!check_way){ check_way = true; showWay(way); } } tempScrollTop = currentScrollTop; });

      Well, here you can think purely logically. And you can guess to make a hook that will work on a simple principle:

      With each scrolling triggered, it is necessary to increment a certain counter by one. Also in each operation of your function, check if the counter value is not equal to one. If equal, then the function ends. But the counter will also need to be reset! Do this in a timer at intervals of, for example, 0.5-0.7 seconds.