4

Short version: This works

$(document).on("click",".Container",function(){})

This does not:

$(document).on("scroll",".Container",function(){})

Long version: I'm sorry but posting a code snippet isn't feasible as it's a complex app-like interface but I'll try to explain the issue to the best of my abilities:

  • Mobile responsive website that loads different interfaces depending on screen real-estate.
  • Smallest interface composed of 3 parts - navigation at the top, search at the bottom and content in the middle.
  • Content is mostly loaded during use and not at page load.
  • I need to trigger a function when the content is scrolled, both up and down and on the fly not just past a certain point.
  • I can still scroll, it just doesn't trigger as an event.
  • I've tried everything I've found to no avail, from my short experience and what I've been reading I think it might have to do with how scroll doesn't bubble up the same as click, but I have no idea what I should do or try with that information.
  • While it doesn't seem to influence my problem (removing it doesn't solve the issue) I should disclose that I'm using hammer.js to simulate touch events as it might influence the solution.

Thanks in advance for all the help.

Beyond this point I'll edit with suggestions that didn't work--

Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
Ricardo Marques
  • 99
  • 1
  • 2
  • 10
  • Hope this link helps you: http://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery – NightsWatch Oct 02 '15 at 15:50
  • 1
    You could alternatively capture the scroll event if no need to support IE8 – A. Wolff Oct 02 '15 at 15:52
  • 2
    Look at @A.Wolff 's answer here http://stackoverflow.com/questions/9253904/why-doesnt-delegate-work-for-scroll#answer-30476388 – Michael Doye Oct 02 '15 at 15:53
  • @PradeepSekar I've used something of the sort on another page, but the problem is that applies to window scroll and not scroll in a particular div, I could probably get it to work, but I'm doing to have 2 scrollable divs that would screw that up so I need a universal solution if there is any. – Ricardo Marques Oct 02 '15 at 16:31
  • @A.Wolff Coment seems to have done the job. Now it triggers. Also thanks to M.Doye. – Ricardo Marques Oct 02 '15 at 16:33
  • Please post solutions as _answers_, not in the question. – Lightness Races in Orbit Oct 05 '15 at 15:47

2 Answers2

0

I think it's because the scroll event doesn't bubble and you are adding the listener as delegated, you should add it directly:

$('.Container').on('scroll',function(){});

More info about this in: https://api.jquery.com/on/

enriquinho
  • 245
  • 1
  • 6
0

With help from @A. Wolf and @M.Doye I found something that works. While it doesn't help understand what was wrong at least its working.

document.addEventListener('scroll',function(event){
    if(event.target.className==='Container'){
        insert magic spell here
    }
},true);
Ricardo Marques
  • 99
  • 1
  • 2
  • 10