Jquery .on('scroll') not firing the event while scrolling
JqueryEventsScrollJquery Problem Overview
Scroll event is not firing while scrolling the ul
. I'm using jQuery version 1.10.2. As I'm loading the ul
from an ajax page, I couldn't use $('ulId').on('scroll', function() {});
or other live methods. Please help me to find a solution.
$(document).on( 'scroll', '#ulId', function(){
console.log('Event Fired');
});
Jquery Solutions
Solution 1 - Jquery
You probably forgot to give #
before id for id selector, you need to give #
before id
ie is ulId
You probably need to bind the scroll event on the div that contains the ul and scrolls. You need to bind the event with div instead of ul
$(document).on( 'scroll', '#idOfDivThatContainsULandScroll', function(){
console.log('Event Fired');
});
Edit
The above would not work because the scroll event does not bubble up in DOM which is used for event delegation, see this question why doesn't delegate work for scrolling.
But with modern browsers > IE 8, you can do it in another way. Instead of delegating by using jquery, you can do it using event capturing with javascript document.addEventListener
, with the third argument as true
; see how bubbling and capturing work in this tuturial.
document.addEventListener('scroll', function (event) {
if (event.target.id === 'idOfUl') { // or any other filtering condition
console.log('scrolling', event.target);
}
}, true /*Capture event*/);
If you do not need event delegation then you can bind scroll event directly to the ul instead of delegating it through document
.
$("#idOfUl").on( 'scroll', function(){
console.log('Event Fired');
});
Solution 2 - Jquery
Binding the scroll event after the ul has loaded using ajax has solved the issue. In my findings $(document).on( 'scroll', '#id', function () {...}) is not working and binding the scroll event after the ajax load found working.
$("#ulId").bind('scroll', function() {
console.log('Event worked');
});
You may unbind the event after removing or replacing the ul.
Hope it may help someone.
Solution 3 - Jquery
Using VueJS I tried every method in this question but none worked. So in case somebody is struggling whit the same:
mounted() {
$(document).ready(function() { //<<====== wont work without this
$(window).scroll(function() {
console.log('logging');
});
});
},
Solution 4 - Jquery
Another option could be:
$("#ulId").scroll(function () { console.log("Event Fired"); })
Reference: Here
Solution 5 - Jquery
$("body").on("custom-scroll", ".myDiv", function(){
console.log("Scrolled :P");
})
$("#btn").on("click", function(){
$("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>');
listenForScrollEvent($(".myDiv"));
});
function listenForScrollEvent(el){
el.on("scroll", function(){
el.trigger("custom-scroll");
})
}
see this post - https://stackoverflow.com/questions/16505182/bind-scroll-event-to-dynamic-div
Solution 6 - Jquery
I know that this is quite old thing, but I solved issue like that: I had parent and child element was scrollable.
if ($('#parent > *').length == 0 ){
var wait = setInterval(function() {
if($('#parent > *').length != 0 ) {
$('#parent .child').bind('scroll',function() {
//do staff
});
clearInterval(wait);
},1000);
}
The issue I had is that I didn't know when the child is loaded to DOM, but I kept checking for it every second.
NOTE:this is useful if it happens soon but not right after document load, otherwise it will use clients computing power for no reason.
Solution 7 - Jquery
Can you place the #ulId in the document prior to the ajax load (with css display: none;), or wrap it in a containing div (with css display: none;), then just load the inner html during ajax page load, that way the scroll event will be linked to the div that is already there prior to the ajax?
Then you can use:
$('#ulId').on('scroll',function(){ console.log('Event Fired'); })
obviously replacing ulId with whatever the actual id of the scrollable div is.
Then set css display: block; on the #ulId (or containing div) upon load?
Solution 8 - Jquery
I just solved the problem with the fact that the scrollable element won't appear immediately after page load:
$(document).ready(function () {
var checkIt = setInterval(function (){
if($('body').find('.scrollable-wrapper').length > 0){
clearInterval(checkIt);
jQuery('.scrollable-wrapper').on('scroll', function () {
console.log(1)
});
}
},100)
});
After finding that the element is there, the interval will stop and the event will be fired to listen.