<%@ 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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
/**
* 判斷滾動條是否到最底端的方法
* @param Element obj
*/
function isScrollBottom(obj) {
if (obj.scrollTop + obj.clientHeight === obj.scrollHeight) {
return true;
} else {
return false;
}
}
$(function(){
/**
*綁定滾動事件
*/
$('#scrdiv').scroll(function(e) {
if (isScrollBottom(this)) {
// 滾動到底端了TODO加載内容
//加載資料
alert('已經到低端了');
} else {
// 沒有滾動到底端TODO 其他處理
}
});
});
function exce(){
window.open(url);
}
</script>
</head>
<body>
<div id="scrdiv"
style="height: 130px; width: 230px; overflow-y: scroll; border: 1px solid red;">
資料在這裡表示 資料在這裡表示 資料在這裡表示 資料在這裡表示 資料在這裡表示 資料在這裡表示 資料在這裡表示 資料在這裡表示
資料在這裡表示 資料在這裡表示 資料在這裡表示 資料在這裡表示 資料在這裡表示 資料在這裡表示 資料在這裡表示 資料在這裡表示
資料在這裡表示 資料在這裡表示 資料在這裡表示 資料在這裡表示</div>
fffffffffffffffffff
<input type="button" οnclick="exce()" value="exce">;
</body>
</html>
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)