手机Webkit上的元素滚动处理之二：WebKit Scrollbar
手机Webkit上的元素滚动处理之一： iScroll, YUI ScrollView
IScroll等javascript框架可以在WebKit浏览器中工作，但是毕竟不是浏览器内置支持的哦，性能有问题，兼容性也会有问题。
其实Webkit浏览器有内置的滚动条处理，支持区域（比如div和iframe）的滚动。
参考：html页面中运用CSS为层(div)元素添加滚动条
参考：资料（英文）
例子参考1： 可以在黑莓9800手机上浏览器里面直接测试，例子里面的代码也非常之简洁。
例子程序2：Lemma-for-the-BlackBerry-PlayBook
讨论：force scrollbar on BlackBerry PlayBook
继续讨论
根据例子参考1做的JQuery Mobile页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tab Bar Example</title>
<!-- width=680 , style="height:350px;" 才能保证在9900手机上拉动屏幕的时候 整个屏幕不抖动-->
<meta name="viewport" id="viewport" content="width=640,initial-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<!-- content scroll bar 滚动条
1)<style type="text/css">
2)<div data-role="content" style="height:350px;" id="scroll">
-->
<style type="text/css">
<!--
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
-->
</style>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>黑莓移动作业</h1>
</div>
<div data-role="content" style="height:350px;" id="scroll">
<ul data-role="listview">
<li>
<a href="#">
<h3>超级战舰</h3>
<p>Rated: PG</p>
<p>Runtime: 95 min.</p>
</a>
</li>
<li>
<a href="#">
<h3>复仇者联盟</h3>
<p>Rated: PG-13</p>
<p>Runtime: 137 min.</p>
</a>
</li>
<li>
<a href="#">
<h3>黑客帝国 I</h3>
<p>Rated: PG-13</p>
<p>Runtime: 131 min.</p>
</a>
</li>
<li>
<a href="#">
<h3>黑客帝国 II</h3>
<p>Rated: PG-13</p>
<p>Runtime: 131 min.</p>
</a>
</li>
<li>
<a href="#">
<h3>X-Men</h3>
<p>Rated: PG-13</p>
<p>Runtime: 131 min.</p>
</a>
</li>
<li>
<a href="#">
<h3>黑衣人</h3>
<p>Rated: PG-13</p>
<p>Runtime: 131 min.</p>
</a>
</li>
<li>
<a href="#">
<h3>开往春天的地铁</h3>
<p>Rated: OK</p>
<p>Runtime: 131 min.</p>
</a>
</li>
</ul>
</div>
<!-- tab bar with standard icons -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">新闻与通知</a></li>
<li><a href="#" data-icon="home">我的任务</a></li>
<li><a href="#" data-icon="star" class="ui-btn-active">我的报告</a></li>
<li><a href="#" data-icon="grid">我的配置</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>