Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )
In developing the project, often you need to display large amounts of data. If all displayed, the data is relatively small, can not see any difference, if a lot of data, a request show all, which is quite terrible.
Faced with this problem, PC in a paging effect, the data is divided into pages and pages, current page request data feed,
The smaller screen mobile terminal, paging, not how good-looking, commonly used method is to continue to load the data when scrolling in the end section
Rolling load is actually a page, but the page does not use it.
(A), the effect of scrolling events and principles
Effect: When you scroll to the bottom of the current page, will be going round in circles buffered data load the next page, after the completion of the scroll area and increased content, and so on;
Principle: 3 data (height scrolling windows, scrolling the contents of the total height, is currently rolling distance),
A critical (total height = scrolling content is currently rolling distance + scroll window height)
1. Obtain a rolling window height: . ( 'Slector') height (
2. Get the total height of the scrolling content: $ (this) .get (0) .scrollHeight
3. currently rolling distance: $ (this) .scrollTop ()
(Two), scroll scroll events: $ (selector) .scroll (function () {})
Copy the code
function scrollFunc(){
$("#container").scroll(function(){
var $this =$(this),
viewH =$(this).height(),//可见高度
contentH =$(this).get(0).scrollHeight,//内容高度
scrollTop =$(this).scrollTop();//滚动高度
if(contentH = viewH + scrollTop) { //当滚动到底部时，
}
if(contentH - viewH - scrollTop <= 100) { //当滚动到距离底部100px时,
}
if(scrollTop/(contentH -viewH) >= 0.95){ //当滚动到距离底部5%时
// 这里加载数据..
}
});
}