除了BODY和HTML的滚动条,在触屏下几乎所有浏览器都不支持DIV的滚动条(说几乎是因为新版的IOS已经支持)
这个应该算是完美解决方案了,需要注意的是setTimeout,必须要在内部的HTML解析完毕,JS获取它的高度不会出错的时候才可以执行,一般来说100毫秒差不多了.如果内部是个大图片,且高度不固定的时候,倒计时要久一点.
<!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">
<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="text/javascript" src="../../src/iscroll.js"></script>
<script type="text/javascript">
var myscroll;
function loaded(){
setTimeout(function(){
myscroll=new iScroll("wrapper");
},200 );
}
window.addEventListener("load",loaded,false);
</script>
<style type="text/css" media="all">
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;
}
</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>
<li>Pretty row 22</li>
<li>Pretty row 23</li>
<li>Pretty row 24</li>
<li>Pretty row 25</li>
<li>Pretty row 26</li>
<li>Pretty row 27</li>
<li>Pretty row 28</li>
<li>Pretty row 29</li>
<li>Pretty row 30</li>
<li>Pretty row 31</li>
<li>Pretty row 32</li>
<li>Pretty row 33</li>
<li>Pretty row 34</li>
<li>Pretty row 35</li>
<li>Pretty row 36</li>
<li>Pretty row 37</li>
<li>Pretty row 38</li>
<li>Pretty row 39</li>
<li>Pretty row 40</li>
</ul>
</div>
</div>
<div id="footer"></div>
</body>
</html>
相关推荐
div滚动条 带滚动条的div div滚动条样式div滚动条 带滚动条的div div滚动条样式
优秀的的div滚动条优化代码 优化之后不在影响滚动功能的情况下使div的滚动条变为半透明的...
vue自定义浏览器滚动条(已兼容ie)
div滚动条样式一览-div+css设计网，div滚动条，多个div滚动条样式
js实现div随浏览器高度变化，主要是高度变化和实现滚动条，还有侧栏显示隐藏，可以作为一个地图开发界面的参考
DIV滚动悬浮层，页面滚动条滚动，悬浮层保持位置不变！
jQuery实现将div的滚动条滚动到指定位置 jQuery实现将div的滚动条滚动到指定位置
jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条
div随滚动条上下滚动,div随滚动条上下滚动div随滚动条上下滚动div随滚动条上下滚动
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
网页局部div随滚动条置顶滚动 效果很好，跟普通的滚动不太一样，没有延迟。
这又是一个浏览器兼容问题，解决IE火狐Operal多浏览器 获取当前Div所在的滚动条高度。
jbox停止更新后，高版本浏览器下有一些问题，调整了在新版本浏览器下，调用 iframe页面出现滚动条，以及弹出层下方未对齐等问题。不过，技术有限，改的不是很正规。只是用来应急，旧系统已经使用的情况下，可以试试...
解决了 滚动条中元素是DIV 导致的问题
完美解决ASP.NET回传后div滚动条位置复位的问题
单个div滚动条初始化到最低位置
Div滚动条随鼠标滚动js版（由网友JQuery版改写而成），可解决IE8下，Div由于“onSelectStart=return false“或onfocus()导致的失去焦点后，滚动条无法滚动问题
浮动div 页面两边滚随滚动条滚动的DIV div滚动
Div滚动条随鼠标滚动Jquery版（转）Div滚动条随鼠标滚动Jquery版（转）