Jquery Live Scroll Event on Mobile (Work Around)

jQuery live scroll event on mobile (work around)

With jQuery:

$('body').bind('touchmove', function(e) { 
    console.log($(this).scrollTop()); // Replace this with your code.
});

This should give you a consistent stream of the scrollTop value when the user scrolls, but be careful as it's going to fire even while the user is just holding his finger on the screen.

Note that if you're using jQuery >= 1.7 the preferred binding method is
.on() instead of the .bind() method I've used in my example. In that case my example would be

$('body').on({
    'touchmove': function(e) { 
        console.log($(this).scrollTop()); // Replace this with your code.
    }
});

Source: https://github.com/dantipa/pull-to-refresh-js/blob/master/jquery.plugin.pullToRefresh.js

scroll event not working on mobile

Try this:

$(document.body).on('touchmove', onScroll); // for mobile
$(window).on('scroll', onScroll); 

// callback
function onScroll(){ 
    if( $(window).scrollTop() + window.innerHeight >= document.body.scrollHeight ) { 
        track_page++; 
        load_contents(track_page); 
    }
}

observe scrolling in div doenst work for future events

As per jQuery docs here:

In all browsers, the load, scroll, and error events (e.g., on an
element) do not bubble..Such events are not supported for use with
delegation, but they can be used when the event handler is directly
attached to the element generating the event..

But, you can use Javascript addEventListener on the parent or document to capture the event and then do a delegation using the event.target for dynamic elements.

wrap.addEventListener('scroll', function (e) {
    if (e.target.className === 'chat-window') { 
        console.log('scrolling', e.target);
    }
}, true);

Example:

var chat = $("#tmpl").html(), 

    $chat = $(chat),

    wrap = document.getElementById('wrap');

$("#wrap").append($chat);

wrap.addEventListener('scroll', function (e) {

    if (e.target.className === 'chat-window') { 

        console.log('scrolling');

    }

}, true);

console.log = function(txt) {

  $("#result").html($("#result").html() + "<br>" + txt);

}

.chat-window {

    height: 120px; width: 320px;

    border: 1px solid gray;

    overflow: auto;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id="tmpl" type="text/template">

    <div class="chat-window" contenteditable></div>

</script>

<p>Type any content below and cause it to scroll..</p>

<div id="wrap"></div>

<p id="result"></p>

Jquery .on('scroll') not firing the event while scrolling

You probably forgot to give # before id for id selector, you need to give # before id ie is ulId

$(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.

Live Demo

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.

Live Demo

$("#idOfUl").on( 'scroll', function(){
   console.log('Event Fired');
});

javascript scroll event for iPhone/iPad?

The iPhoneOS does capture onscroll events, except not the way you may expect.

One-finger panning doesn’t generate any events until the user stops panning—an onscroll event is generated when the page stops moving and redraws—as shown in Figure 6-1.

Similarly, scroll with 2 fingers fires onscroll only after you've stopped scrolling.

The usual way of installing the handler works e.g.

window.addEventListener('scroll', function() { alert("Scrolled"); });
// or
$(window).scroll(function() { alert("Scrolled"); });
// or
window.onscroll = function() { alert("Scrolled"); };
// etc 

(See also https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html)

Related Topics