<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "
pageencoding= "UTF-8"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>insert title here</title>
<script type= "Text/javascript" src= "Jquery-1.7.2.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("#contain"). Scroll (
function () {
var $this = $ (this), VIEWH = $ (this). Height (),//Visible altitude
Contenth = $ (this). Get (0). scrollheight,//content height
ScrollTop = $ (this). ScrollTop ();//Scroll height
Console.log ("VIEWH:" + VIEWH + "Contenth:" + Contenth + "scrolltop:" + scrolltop);
if (contenth-viewh-scrolltop <= 100) {//arrive at bottom 100px, load new content
if (ScrollTop/(CONTENTH-VIEWH) >= 0.95) {//To reach the bottom 100px, load new content
Load the data here:
Alert ("Load data here:");
}
});
Scrollbottomtest = function () {
}
})
</script>
<body>
<div id= "contain"
Style= "width:100%; height:500px; Overflow:auto; Border:solid Red 1px; " >
Load the data here: <br> Load Data here: <br> Load Data here: <br> Load Data here: <br>
Load the data here: <br> Load Data here: <br> Load Data here: <br> Load Data here: <br>
Load the data here: <br> Load Data here: <br> Load Data here: <br> Load Data here: <br>
Load the data here: <br> Load Data here: <br> Load Data here: <br> Load Data here: <br>
Load the data here: <br> Load Data here: <br> Load Data here: <br> Load Data here: <br>
Load the data here: <br> Load Data here: <br> Load Data here: <br> Load Data here: <br>
Load the data here: <br> Load Data here: <br> Load Data here: <br> Load Data here: <br>
Load the data here: <br> Load Data here: <br> Load Data here: <br> Load Data here: <br>
Load the data here: <br> Load Data here: <br> Load Data here: <br> Load Data here: <br>
<div style= "width:100%; Height:200px;background:gray; ">
</div>
</div>
</body>
scroll bar to bottom trigger event