<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.scrolldiv{
600px;
height: 500px;
margin: 10px auto;
overflow-y: scroll;
padding: 10px;
border:1px solid #f60;
}
</style>
</head>
<body>
<div class="scrolldiv" id="testDiv">
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
<p>这里有很多内容</p>
</div>
<script type="text/javascript">
var testDiv = document.getElementById('testDiv');
function divScroll(){
var divScrollTop = testDiv.scrollTop;
var divClientHeight = testDiv.clientHeight;
var divScrollHeight = testDiv.scrollHeight;
console.log(divScrollTop);
console.log(divClientHeight);
console.log(divScrollHeight);
if(divScrollTop + divClientHeight >= divScrollHeight){
console.log('到底部了');
}
if(divScrollTop == 0){
console.log('到顶部了');
}
}
testDiv.onscroll = divScroll;
</script>
</body>
</html>