iscroll

用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的overflow:sceb浏览器中HTML元素的overflow:scroll滚动属性失效问题

iscroll4webhtml5mobilejavascript

web移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容，但内容条数未知；如果条数过多，容器显示滚动条。这鸟需求按说是So easy，容器设死宽、高，CSS加属性overflow:scroll;完事！可拿设备去测的时候有趣了，Pc all browser正常，ios正常 ，android失效。泥马在android下效果与 overflow:hidden;一样，溢出部分隐藏了！
水平有限，用尽吃奶力各种解决未果，Google搜索有人说是android系统BUG，最后查到比较靠谱的解决是国外某高手开发了个JS库，名曰iScroll 4 。 亲测，好用，唯独效率不敢恭维（拿别人的东西用，少TM废话）。
下载地址：http://cubiq.org/iscroll-4
使用方法：
1. 引入 iscroll.js 
<script type="application/javascript" src="http://istyles.blog.163.com/blog/js/iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', loaded, false);
window.onload = function() { 
    setTimeout(function(){ new iScroll(document.getElementById('scroller')) }, 100) 
};
</script>
2. 添加必要的样式
<style type="text/css">
#wrapper {
position:relative;
z-index:1;
height:200px;        /* Desired element height */
}
</style>

3. 容器加 id="wrapper" ， 内容加 id="scroller" 
<div id="wrapper">
               <ul id="scroller">
                    <li></li>
                     ...
                    <li></li>
                </ul>
</div>