Simple implementation of dynamic loading effect of JQuery page with scroll bar of recommendation

Google reader has an AJAX scollLoad effect is very good, that is, reading items do not need to turn pages, browser scroll bar down to 1 fixed position automatically loaded in a new batch of items, 1 until all items are loaded. You know, when the amount of data increases frequently, it doesn't seem meaningful to find the target data by positioning the page number. I think an WEB application with a sophisticated user experience should guide users to find target data using features such as TAG or search. As for browsing data, especially browsing the latest data, it is a good attempt to load it with browser scroll bars...

I tried to implement this function with jquery. First get the total length attribute value of the scroll bar: scrollHeight, and the current position attribute value of the scroll bar: scrollTop. Then, through calculation, if the current value is located at 2/3 of the total length value, new data will be loaded. Assuming that there is an element on DOM that is overflow style is scroll, that is, the scroll bar is enabled when the content in the element overflows the specified height of the element. Load an existing file for the element using the load method of jquery, which I assume is table. html. The contents of this file can be a data table enough to scroll the browser.

jquery. js " > //Load the jquery library

var hght=0;// Initialize the total length of the scroll bar 
var top=0;// Initializes the current position of the scroll bar 
$(document).ready(function() {//DOM Adj. onload Events 
$( " #mypage " ).load( " table.html " );//table.html Is loaded into the  mypage Element 

$( " #mypage " ).scroll( function() {// Defines the event that triggers when the position of the scroll bar changes. 
hght=this.scrollHeight;// Get the total length of the scroll bar and assign it to hght Variable 
top=this.scrollTop;// Get the current value of the scroll bar and assign it to top Variable 
});
});

setInterval( " cando(); " ,2000);// Every interval 2 Second call 1 Times cando Function to determine the current scroll bar position. 

function cando(){
if(top>parseInt(hght/3)*2)// That determines whether the current position of the scroll bar exceeds the total length 2 /3 , parseInt Is the rounding function 
show();// If so, call the show Function loads the contents. 
}

function show(){
$.get( " table.html " , function(data){// Utilization jquery Adj. get Method obtains table.html Content 
$( " #mypage " ).append(data);// Use append Method appends content to the mypage Element. 
hght=0;// Restores the total scroll bar length because $( " #mypage " ).scroll Events 1 Triggered, and will get a new value. If it is not restored, it may cause error of judgment and load again... 
top=0;// Same reason as above. 
});
}

Why call judgment once every 2 seconds? Because whenever $("# mypage"). scroll Event 1 is triggered, the values of hght and top may always satisfy the judgment of cando function, that is, the value of top is always 2-thirds of hght. Therefore, the server may be burdened by multiple loads. This is also the reason why the values of hght and top are assigned to 0 after each load.

The effect of this code is to append the contents of table. html to the element mypage as long as the scroll bar position of the element mypage is at two-thirds of the total length of the scroll bar. Of course, this operation is to load endlessly. In a real AJAX application, table. html can be replaced by asp or php scripts, which receive get or post parameters for processing, and then return meaningful data. The get method of jquery can set the parameter data of get mode,

For example:

$. get ("test. php", {name: "boho", id: "1"});

Equivalent to http://hostlocal/test.php? name = boho & id=1

This form of http access. The test. php output is then retrieved through the callback function of the get method:

$.get( " test.php " , {name: " boho " ,id: " 1 " },function(data){
alert( " Data Loaded:  "  + data);
});