<!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" /> <script src="jquery-3.0.0.js"></script> <script type="text/javascript" src="iscroll.js"></script> <title>IScroll</title><style>
* { margin: 0; padding: 0; } body { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: pink; } ul, li { list-style: none; background: white; } header { line-height: 50px; text-align: center; position: absolute; width: 100%; top: 0px; left: 0; height: 50px; background: darkcyan; } ul li { line-height: 40px; font-family: "微软雅黑"; text-align: center; border-bottom: 2px solid gray; } #wrapper { position: absolute; top: 50px; left: 0; bottom: 50px; right: 0; overflow: hidden; /*overflow-y: scroll;*/ } footer { width: 100%; height: 50px; background: #999; text-align: center; line-height: 50px; position: absolute; bottom: 0; left: 0; } </style></head>
<body>
<header>header</header> <div id="wrapper"> <ul> <li>1111111111111</li> <li>2222222222</li> <li>333333333</li> <li>444444444</li> <li>55555555</li> <li>666666666666</li> <li>777777777</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> <li>666666666666</li> </ul> </div> <footer> footer </footer></body>
</html>
<script>
//1.使用isroll区域不要出现滚动条 //2.使用isroll只会给第一个子集元素加上滚动效果 window.onload = function() { var myIscroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true });myIscroll.on('slideDown', function() {
alert("下拉"); updata(); })myIscroll.on('slideUp', function() {
// alert("上拉"); ajax(); myIscroll.refresh(); })function updata() {}
function ajax() {
var ul = document.querySelector("#wrapper ul"); for(var i = 0; i < 5; i++) { var ele = document.createElement("li"); ele.innerHTML = "加载出来的li"; ul.appendChild(ele); }}
}
</script>