使用过iScroll.js 的烦劳帮助一下

使用过iScroll.js 的麻烦帮助一下
今天才接触这个插件，所以不会用，遇到一些问题，想向大家学习下：



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>iScroll demo: bounce easing</title>

<script type="text/javascript" src="js/iscroll.js"></script>

<script type="text/javascript">

var myScroll;

function loaded () {

	myScroll = new IScroll('#wrapper', { bounceEasing: 'elastic', bounceTime: 1200 });

}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

</script>

<style type="text/css">

* {

  margin: 0px;

  padding: 0px;

  list-style: none;

}

#wrapper {

	position: absolute;

	z-index: 1;

	top: 45px;

	bottom: 48px;

	width: 100%;

	background: #ccc;

	overflow: hidden;

}

#scroller {

	position: absolute;

	z-index: 1;

	width: 100%;

}

p {

	padding: 0 10px;

	height: 40px;

	line-height: 40px;

	border-bottom: 1px solid #ccc;

	border-top: 1px solid #fff;

	background-color: #fafafa;

	font-size: 14px;

}

</style>

</head>

<body onload="loaded()">

<div id="wrapper">

	<div id="scroller">

	  <p>1</p>

    <p>2</p>

    <p>3</p>

    <p>4</p>

    <p>5</p>

    <p>6</p>

    <p>7</p>

    <p>8</p>

    <p>9</p>

    <p>10</p>

    <p>…………</p>

    <p>36</p>

    <p>37</p>

    <p>38</p>

    <p>39</p>

    <p>40</p>

	</div>

</div>

</body>

</html>

这里是官方的一个demo,并带有<div id ="head"></div>和<div id ="footer"></div> （被我删了）
我想把#wrapper中的top:0px ;bottom:0px; 可修改后，滑动到最下面的时候就出现多余的空白，我不清楚这个空白是怎么产生的？使用过iScroll.js 的烦劳帮助一下

还有我有时修改另一个只有文本的demo时，改变#wrapper的宽高，下拉不到文本的最后。
总结:1我不明白以上空白如何产生并解决这个问题。
2 设置#wrapper 和#scroller的宽高问题，我看网上说是scroller要比wrapper 高，才能下滑，在以上demo中，我没发现设置了高度，有些不太明白。
（新手问题有点乱，希望不要觉得麻烦）
------解决思路----------------------
myScroll = new IScroll('#scroller', { bounceEasing: 'elastic', bounceTime: 1200 ,desktopCompatibility:true});

使用过iScroll.js 的烦劳帮助一下

相关推荐