CODEWITHSUNDEEP
jqueryscrollmousewheel
user7031185
user7031185

Reputation: 71

How to use mousewheel and scroll events properly in jquery?

my problem:

    if( user reach the bottom of the page){
      hide element;
    }else{
      show element;
    }

my solution is to use mousewheel / scroll event handler to know if the user is moving then calculate if I'm at the bottom of the page and hide or show an element...

everything works fine but i got this worning

Handling of 'mousewheel' input event was delayed for 123 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.

this ( I guess ) is due to the fact that this code

 jQuery('body').on('mousewheel', function(e){

runs too many times.

So how can I make this code more efficient ?
Is there a way to run the event after the scroll?

I don't want to use plugins.

Upvotes: 0

Views: 100

Answers (1)

Saurabh Sharma
Saurabh Sharma

Reputation: 2472

You can achieve it by using something like: Check this fiddle

    jQuery(window).on("scroll", function(){
        if($(window).scrollTop() + $(window).innerHeight() == $(document).height())
        {
            //User reached end of page
            //Hide element here
            $("span").hide();
        }
        else
        {
            //Show element here
            $("span").show();
        }
   });

Upvotes: 1

Related Questions