移动端滚动监听
2017-08-04 本文已影响0人
xiaoaiai
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;}
.page{width: 100%;height: 100%;position: relative;}
header{height: 45px;background: lightblue;color: white;position: absolute;top: 0;left: 0;text-align: center;width: 100%;line-height: 45px;}
section{position: absolute;top: 45px;bottom: 45px;left: 0;right: 0;overflow: auto;}
p{border-bottom: 1px solid #CECECE;margin-bottom: 5px;}
footer{height: 45px;background: lightcoral;color: white;text-align: center;position: absolute;bottom: 0;left: 0;width: 100%;line-height: 45px;}
.btn{display: block;height: 20px;}
</style>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
function init(){
for(var i=0;i<30;i++){
$('.num').append('<p>'+i+'</p>')
}
$('section').append('<button class="btn">btn</button>')
}
init();
$('section').scroll(function(){
var docheight = document.querySelector('section').scrollHeight;
console.log('docheight_'+docheight);
var docclient = document.querySelector('section').clientHeight;
console.log('docheight_'+docclient);
var scrollHeight = parseInt(docheight)-parseInt(docclient);
var scTop = $(this).scrollTop();
console.log('sctiop_'+scTop);
if(scrollHeight == scTop){
init();
}
})
})
</script>
</head>
<body>
<div class="page">
<header>header</header>
<section>
<div class="num"></div>
<div class="reload"></div>
</section>
<footer>footer</footer>
</div>
</body>
</html>
