0

我在要滚动的内容中向左浮动了一些 ul li 元素，但它一直移回顶部。我无法滚动屏幕的“折叠”。有人可以看看http://ipad.veezo.co.uk上的代码并给我一些帮助吗？

谢谢

    <!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;
}
4

2 回答 2

1

我查看了您的页面，从我在 css 中看到的内容来看，您有

#contentScroller {
    padding-bottom: 1210px;
}

我建议不要指定 padding-bottom 而是让您的 #contentScroller 浮动到左侧，如下所示：

#contentScroller {
    float: left;
}

它对我来说很好。

于 2013-07-21T15:25:13.977 回答
0

试试下面的 CSS。它对我有用。

#navWrapper {
    position: absolute;
    z-index: 1;
    top: 55px;
    left: 0;
    width: 6%;
    bottom: 0px;
}

在这里，width取决于top您的需求。

于 2012-08-22T09:01:29.123 回答