用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>