0
У меня есть некоторые элементы ul li, поплывшие слева в содержимом, которое я хочу прокрутить, но он продолжает двигаться назад. Я не могу прокрутить «сгиб» экрана. Может кто-нибудь взглянуть на код на http://ipad.veezo.co.uk и дать мне некоторую помощь?iScroll не прокручивается на iPad, когда ul li используется с float: left;
Благодаря
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Veezo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<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">
<script type="application/javascript" src="js/cubiq-iscroll-712640b/src/iscroll.js"></script>
<script type="text/javascript">
var scrollContent,
scrollNav;
function loaded() {
scrollContent = new iScroll('contentScroller');
scrollNav = new iScroll('navWrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
</head>
<body>
<header id="status"><img src="images/ipad-status-name.jpg" alt="ipad" height="20px" width="auto" /><?php print date('H:i'); ?><img class="battery" src="images/ipad-status-battery.jpg" alt="ipad" height="20px" width="auto" /></header>
<header><img src="images/small-logo.png" alt="veezo" height="30px" width="auto" /></header>
<div id="page">
<div id="sidebar">
<nav id="navWrapper">
<ul id="navScroller">
<li>Home</li>
<li>Movies</li>
<li>TV Shows</li>
<li>Music</li>
<li>My Collection</li>
<li>People</li>
</ul>
</nav>
</div><!--end sidebar-->
<div id="content">
<article id="contentWrapper">
<div id="contentScroller">
<ul>
<li><img src="images/content/drive.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
<li><img src="images/content/tinker.jpg" /></li>
</ul>
</div><!--end contentScroller-->
</article>
</div><!--end content-->
</div> <!--end page-->
</body>
</html>
и
html,body {
height:100%;
}
body,ul,li,header,nav,aside,section,article,p {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
background:#000;
}
p {
margin-bottom:1.5em;
line-height:150%;
}
header,nav,aside,section,article {
display:block;
}
#page {
width:100%; height:100%;
position:relative;
display:-webkit-box;
display:-moz-box;
display:-o-box;
display:box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-o-box-orient:horizontal;
box-orient:horizontal;
background:#000;
}
#sidebar {
width:200px;
margin-right:1px;
}
#content {
-webkit-box-flex:1;
-moz-box-flex:1;
-o-box-flex:1;
box-flex:1;
}
#sidebar, #content {
position:relative;
height:100%;
}
header {
height:43px; line-height:43px;
border-bottom:1px solid #2a0e3c;
background-color:#000;
background-image:url(images/menubar-background.jpg);
background-size:46px;
color:#717880;
font-size:18px; font-weight:bold;
text-align:center;
text-shadow:0 1px 0 #fff;
-webkit-border-top-left-radius:4px;
-moz-border-top-left-radius:4px;
-o-border-top-left-radius:4px;
border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
-moz-border-top-right-radius:4px;
-o-border-top-right-radius:4px;
border-top-right-radius:4px;
}
header img{
margin-top:5px;
}
#status {
height:20px; line-height:20px;
background-color:#000;
background-image:none;
color:#999999;
font-size:13px;
text-align:center;
font-weight:bold;
text-shadow:none;
}
#status img{
margin:0;
float: left;
}
#status img.battery{
margin:0;
float: right;
}
#navScroller > li {
padding:0 10px;
border-bottom:1px solid #ccc;
height:60px; line-height:60px;
}
#contentScroller {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
padding:0;
}
#contentScroller ul li {
border:#FFF 15px solid;
width: 190px;
height: auto;
margin:40px 0 0 40px;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
list-style:none;
float:left;
}
#contentScroller ul li img{
width: 100%;
height: auto;
}
nav {
position:absolute;
top:0; bottom:0; left:0; right:0;
font-size:15px;
background:#fff;
}
article {
position:absolute;
top:0; bottom:0; left:0; right:0;
font-size:15px;
background-image:url(images/background.jpg);
background-size:50px;
}