js ライブラリ iscrollの利用について
iphoneでhttp://cubiq.org/iscroll-4を利用したいのですが、
最初の読み込み時、下までスクロールすと途中で止まってしまい、
最後までスクロールできません。
一回横に倒して、縦に戻して試すと大丈夫です。
どうやら画像を入れるとそのような現象になるようです。
以下ソースになります。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: simple</title>
<script type="application/javascript" src="js/iscroll4.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<style type="text/css" media="all">
#footer {
position:absolute; z-index:2;
bottom:0; left:0;
width:100%;
height:48px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));;
padding:0;
border-top:1px solid #444;
}
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:0px; left:0;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
position:absolute; z-index:1;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
}
#scroller ul {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
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>
<div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
<li>Pretty row 19</li>
<li>Pretty row 20</li>
<li>Pretty row 21</li>
</ul>
<img src="hoge.jpg" alt="" />
</div>
</div>
</body>
</html>
ご教授お願いいたします。
お礼
ありがとうございます。 私の質問どおり、こちらで要素の位置を変更することができました。 長いスクリプトですのに見ていただいて感謝します。 ただ、要素の位置を変更しても、別のプラグインでスライドさせている要素の上に ドロワーメニューを表示させることができませんでした。 どうやらソースの位置を変更するだけではこのドロワーのjsは使えないようです。 時間がないので別のプラグインを色々試してみたいと思います。 ありがとうございました！