JavaScript-How to implement a scroll bar in a mobile web site to drop load more data

Good afternoon, ladies and gentlemen, I would like to add to my mobile website with the Sina Weibo app scroll bar to load more data function, how to realize this function, please the Big God to guide me, what good code to share under, extremely thanks

Reply content:

Good afternoon, ladies and gentlemen, I would like to add to my mobile website with the Sina Weibo app scroll bar to load more data function, how to realize this function, please the Big God to guide me, what good code to share under, extremely thanks

This mode is called Infinite Scroll, various frameworks and class libraries have a relatively mature implementation, you can refer to

The idea is very simple (in fact, the implementation is very simple), is the AJAX background request data, inserted into the document, as to whether your background rendering good HTML string or back-end to provide data and JS to render it does not matter

$.ajax({    ....//略    success:function(data){        $('body').append(data)//这个意思    },    ...})

Scroll bar events can be monitored, starting at 100px from the bottom to load

    $(window).scroll(function() {        if ($(document).scrollTop() + $(window).height() > $(document).height() - 100) {            $.get(url, function(data) {                $('#list').append(data);            });        }    });

Listen for scrolling events and load more images in the callback function

With Iscroll.js with Ajax request data can be implemented pull-up loading, drop-down refresh, you can try.

