区域滚动的结构
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
</div>
</div>
. mui-scroll-wrapper的默认样式如下:
.mui-scroll-wrapper {
position: absolute;
z-index: 2;
top: 0px;
bottom: 0;
left: 0;
overflow: hidden;
width: 100%;
}
1、问题1:由于 position: absolute; top: 0px;加载时出现滚动区域部分被覆盖,如下:
解决上述问题,需要重新设置top的值,比如设置成top:50px;
2、<div class="mui-scroll"></div>内中的内容会出现滚动条,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
#scroll_1{
height: 200px;position: relative;top: 30px;background: yellow;
}
#scroll_2{
height: 200px;position: relative;top: 60px;background: pink;
}
#scroll_1 div.mui-scroll-wrapper,#scroll_2 div.mui-scroll-wrapper{
top: 30px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">滚动条</h1>
</header>
<div class="mui-content">
<div id="scroll_1">
<p class="mui-text-center">下面是第一个滚动区域</p>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
<ul id="ul1" class="mui-table-view">
</ul>
</div>
</div>
</div>
<div id="scroll_2">
<p class="mui-text-center">下面是第二个滚动区域</p>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
<ul id="ul2" class="mui-table-view">
</ul>
</div>
</div>
</div>
</div>
<script src="js/mui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
mui.init();
// 有滚动条的时候必须进行加载
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
var $_ul1 = $("#ul1");
var $_ul2 = $("#ul2");
var _html1 = '';
var _html2 = '';
for (var i = 0; i < 10; i++) {
_html1 += '<li class="mui-table-view-cell">' +
'<a class="mui-navigate-right">Item' + i + '</a>' +
'</li>';
}
for (var i = 10; i < 20; i++) {
_html2 += '<li class="mui-table-view-cell">' +
'<a class="mui-navigate-right">Item' + i + '</a>' +
'</li>';
}
$_ul1.append(_html1);
$_ul2.append(_html2);
</script>
</body>
</html>