JavaScript/jQuery not triggering scroll event

Question

I'm trying to trigger the scroll event through jQuery and JavaScript for a wordpress site that I'm developing.

$(window).scroll(function() {
   var hT = $('#target').offset().top;
       hH = $('#target').outerHeight();
       wH = $(window).height();
       wS = $(this).scrollTop();
   console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
       console.log('working');
   }
});

And nothing happens on the console. The following code doesn't work:

$(window).scroll(function() {
    console.log('scrolling');
});

Neither do this:

function scrollFunction() {
    console.log('scrolling');
}

window.onscroll = scrollFunction;

I've tested these lines on other non wordpress projects, even in codepen and they work. What I'm missing?

I'm using jQuery 12.2.2. Also, in the same project and for the same purpose, I couldn't make work Waypoints.js, as I posted in this other question.

Any help is really appreciated, thanks!

If your basic script isn't working, I'd imagine you either have a conflict elsewhere on the page, or you're trying to run the script before jQuery has been loaded? Try wrapping it in $(document).ready(function() {}); — David Wilkinson
– David Wilkinson, Commented May 6, 2016 at 11:46
Your code looks ok. Is jquery included? Is your code there (maybe the browser serves the page from cache)? Do you have any other error on page? Have you tried opening a console (f12) and paste the second script there - $(window).scroll(function() { console.log('scrolling'); }); (works ok)? My money is on chache, or other error previous to this part of script. — zozo
– zozo, Commented May 6, 2016 at 11:47
I tryed your code... Works perfectly. Problem is elsewhere, like no jQuery loaded or no element with id="target". — Louys Patrice Bessette
– Louys Patrice Bessette, Commented May 6, 2016 at 11:49
Hey, thank you. The console doesn't show more errors and I'm doing other things with jQuery on the same doc -that has $(document).ready(function() {}); that do work fine. I don't think it's cache, as I'm developing on local and with cache disabled on the browser. I tried @zozo idea, to paste second script on console and it returns a window object but doesn't log anything on the console. I don't know what's going on! I don't know much about wordpress, could be something on that? Thanks! — ohmmho
– ohmmho, Commented May 6, 2016 at 12:02
You could have another event bound before this one that somehow blocks the rest... I'm getting out of ideas :). If the script doesn't work on console something is strange (you can just press f2 here on stack overflow and run it, you will see it woks). Maybe some kind of conflict (some libs overwrite jquery $ and break things for example). As @Paul Crozer suggested. About the cache that is easy to check even if it is minified, just alert something in your script and see if appears. If cache is not the problem you will see the alert. — zozo
– zozo, Commented May 6, 2016 at 12:16

Paul Crozer · Accepted Answer · 2016-05-06 12:15:42Z

1

Have you got your code in a closure? Perhaps some other JavaScript is conflicting with jQuery and using the $ symbol.

e.g. wrap it like this to make sure $ is jQuery:

(function($){

  $(window).scroll(function() {
     var hT = $('#target').offset().top;
         hH = $('#target').outerHeight();
         wH = $(window).height();
         wS = $(this).scrollTop();
     console.log((hT-wH) , wS);
     if (wS > (hT+hH-wH)){
         console.log('working');
     }
  });

})(jQuery);

answered May 6, 2016 at 12:15

Paul Crozer

681 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

zozo Over a year ago

This may not solve the problem, but may be a valid reason +1. Also welcome to SO.

ohmmho Over a year ago

@zozo Yes! this makes sense, but how can i check this? All other jQuery functions I'm running work perfectly!

zozo Over a year ago

Try the answer above :). Also stackoverflow.com/questions/1853223/….

ohmmho Over a year ago

Tried paul's answer and nothing. However, I'm not sure how do I have to use instance of jQuery. Do I check if window is a jQuery object? Thanks Paul and @zozo!

ohmmho Over a year ago

@zozo Well, I checked if window is jQuery with this method and it is jQuery. Not sure what does this means heh

Felix · Accepted Answer · 2016-05-06 11:46:14Z

0

Have you tried this?

<script>
window.onscroll = function() {scrolling()};

function scrolling() {
console.log("Scrolling");
}
</script>

answered May 6, 2016 at 11:46

Felix

801 silver badge7 bronze badges

Comments

kbnawale · Accepted Answer · 2016-05-06 11:51:08Z

0

Try below code... :)

Replaced $(window).scroll(function(){}); to $(window).on('scroll', function(){})

 $(window).on('scroll', function(){

   var hT = $('#target').offset().top;
       hH = $('#target').outerHeight();
       wH = $(window).height();
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
       if (wS > (hT+hH-wH)){
         console.log('working');    
       }
});

answered May 6, 2016 at 11:51

kbnawale

113 bronze badges

Collectives™ on Stack Overflow

JavaScript/jQuery not triggering scroll event

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related