除了BODY
和HTML
的滚动条,在触屏下几乎所有浏览器都不支持DIV
的滚动条(说几乎是因为新版的IOS已经支持)
这个应该算是完美解决方案了,需要注意的是setTimeout
,必须要在内部的HTML解析完毕,JS获取它的高度不会出错的时候才可以执行,一般来说100毫秒差不多了.如果内部是个大图片,且高度不固定的时候,倒计时要久一点.
body, ul, li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
font-family: helvetica;
}
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background-color: #d51875;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
background-image: -moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
background-image: -o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
}
#header a {
color: #f3f3f3;
text-decoration: none;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background-color: #222;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background-image: -moz-linear-gradient(top, #999, #666 2%, #222);
background-image: -o-linear-gradient(top, #999, #666 2%, #222);
padding: 0;
border-top: 1px solid #444;
}
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
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;
}
- Pretty row 1
- Pretty row 2
- Pretty row 3
- Pretty row 4
- Pretty row 5
- Pretty row 6
- Pretty row 7
- Pretty row 8
- Pretty row 9
- Pretty row 10
- Pretty row 11
- Pretty row 12
- Pretty row 13
- Pretty row 14
- Pretty row 15
- Pretty row 16
- Pretty row 17
- Pretty row 18
- Pretty row 19
- Pretty row 20
- Pretty row 21
- Pretty row 22
- Pretty row 23
- Pretty row 24
- Pretty row 25
- Pretty row 26
- Pretty row 27
- Pretty row 28
- Pretty row 29
- Pretty row 30
- Pretty row 31
- Pretty row 32
- Pretty row 33
- Pretty row 34
- Pretty row 35
- Pretty row 36
- Pretty row 37
- Pretty row 38
- Pretty row 39
- Pretty row 40