jQuery function - prevent getting returns "for a while"

Question

I'm checking the scroll direction with wheelDelta but it returns lots of scroll properties at once. I only need to know if it's up or down and it shouldn't return a value under 500ms after first trigger. I tried to play with setTimeout but couldn't solve it nicely. Any ideas?

var distance = $('.section-two').offset().top,
    $window = $(window);

    $window.scroll(function() {
        if ( $window.scrollTop() >= distance ) {
            $('body').css('overflow', 'hidden');
            setTimeout(function(){  
                $(document).bind('mousewheel', function(evt) {

                    var delta = evt.originalEvent.wheelDelta;
                    if(delta > 0){

                        console.log('scrolled up')
                    } else {
                        console.log('scrolled down');
                    }
                })
            }, 500);
        }
    });

Here's the codepen example

score 1 · Answer 1 · answered May 07 '17 at 23:46

1

Can you try unbinding the 'mousewheel' event before you bind it. It seems like, it binds it over and over again. Add $(document).unbind('mousewheel'); before the $(document).bind('mousewheel', function(evt) { line.

answered May 07 '17 at 23:46

Ümit Aparı

540
2
6
23

Thanks Umit, it actually helped a bit but couldn't resolve the problem. I also uploaded the example to CodePen: https://codepen.io/cangoktas/pen/wdPYEy – Can Goktas May 08 '17 at 00:04
With unbind, it returns 1 result in each tick of mousewheel. That's the minimum results you can get with the listener 'mousewheel'. If you want it to work like; it returns just one result after you drag the mousewheel without relaseing it you should consider changing your event listener. Edited CodePen : https://codepen.io/anon/pen/vmWVVg – Ümit Aparı May 08 '17 at 00:12
I guess I kinda sorted it out with setTimeout: https://codepen.io/cangoktas/pen/LyOgqN Thanks again, iyi geceler :) – Can Goktas May 08 '17 at 00:19

score 0 · Answer 2 · answered May 08 '17 at 00:03

0

Try using Lodash to throttle the event. You should be able to store the previous offset and figure out the scroll direction from that:

var lastScrollTop = 0;

function scrollHandler() {
   var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

   if (scrollTop > lastScrollTop){
       console.info('scrolled down');
   } else {
       console.info('scrolled up');
   }
   
   lastScrollTop = scrollTop;
}

window.addEventListener('scroll', _.throttle(scrollHandler, 500))

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>

answered May 08 '17 at 00:03

Conan

2,659
17
24

Thanks, tried Lodash but I disable scroll with overflow:hidden; and then try to detect scroll detection, so Lodash failed to detect it. – Can Goktas May 08 '17 at 00:06
1

In that case, see http://stackoverflow.com/questions/8378243/catch-scrolling-event-on-overflowhidden-element. – Conan May 08 '17 at 00:13

score 0 · Answer 3 · answered May 08 '17 at 00:20

solved with a more proper setTimeout: codepen example

var doMouseWheel = true;
                $(document).bind("mousewheel", function(event, delta)
                {
                        // it'll just not do anything while it's false
                        if (!doMouseWheel)
                            return;

                        // here's where you were unbinding, now just turning false
                        doMouseWheel = false;

                        // do whatever else you wanted
                        var delta = event.originalEvent.wheelDelta;
                        if(delta > 0){
                            console.log('scrolled up')
                        } else {
                            console.log('scrolled down');
                        }

                        // here's where you were rebinding, now wait 200ms and turn on
                        setTimeout(turnWheelBackOn, 800);
                });

                function turnWheelBackOn() { doMouseWheel = true; }

jQuery function - prevent getting returns "for a while"

3 Answers3