当前位置: 首页 > 工具软件 > iScroll > 使用案例 >

iscroll

山乐生
2023-12-01

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

 类似资料:

相关文章

相关问答