Can't trigger a jquery function with scroll on a particular div

Question

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--

Hope this link helps you: stackoverflow.com/questions/21561480/… — NightsWatch
– NightsWatch, Commented Oct 2, 2015 at 15:50
You could alternatively capture the scroll event if no need to support IE8< — A. Wolff
– A. Wolff, Commented Oct 2, 2015 at 15:52
Look at @A.Wolff 's answer here stackoverflow.com/questions/9253904/… — Michael Doye
– Michael Doye, Commented Oct 2, 2015 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
– Ricardo Marques, Commented Oct 2, 2015 at 16:31
@A.Wolff Coment seems to have done the job. Now it triggers. Also thanks to M.Doye. — Ricardo Marques
– Ricardo Marques, Commented Oct 2, 2015 at 16:33

enriquinho · Accepted Answer · 2015-10-02 15:51:40Z

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/

answered Oct 2, 2015 at 15:51

enriquinho

2451 silver badge6 bronze badges

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

1 Comment

Ricardo Marques Over a year ago

In despair I also tried that, but I think it doesn't work since the content was loaded after the page loaded.

Ricardo Marques · Accepted Answer · 2015-10-05 16:42:34Z

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);

answered Oct 5, 2015 at 16:42

Ricardo Marques

992 gold badges2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Can't trigger a jquery function with scroll on a particular div

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related