移动端重构系列7-滚动
原生滚动
原生滚动的属性为:-webkit-overflow-scrolling:touch;
如果是苹果系统的话,这个是没问题的,如果是安卓的话,当你添加或者删除这个属性对比下,好像没什么差别
原生滚动支持测试:
HTML结构为:
<header class="header">hello</header> <div id="main" class="wrap-page"> <section class="page"> <p>此处可以增加内容...</p> </section> </div> <footer class="footer">footer</footer>
CSS样式为:
.header,.footer{ position:absolute; left:0; right:0; height:44px; line-height:44px; text-align:center;} .header{ top:0; border-bottom:1px solid #f00;} .footer{ bottom:0; border-top:1px solid #f00;} .wrap-page{ position:absolute; top:44px; bottom:44px; left:0; right:0; overflow-y:auto;-webkit-overflow-scrolling:touch; padding:10px;} .page p{ margin-bottom:10px;}
iscroll模拟
既然原生的安卓上不太靠谱,那就有必要用JS来解决,直接上iscroll,现在iscroll也已经到第五版本了,iscroll的github上有很全的例子,虽然比较简单,不过入门还是不错的
html结构方面
iscroll要求至少两层结构,wrap是一个固定的容器,overflow为hidden,而scroll为滚动的内容,如果开启translate(默认开启),则使用translate来实现偏移滚动,如果没有则使用left/top来实现偏移滚动。如果wrap下面有多个直接子元素,即scroll有其他兄弟元素则只对第一个子元素滚动,其他的自动忽略。(wrap和scroll的class是随便的,主要就是得有两层结构)
<div class="wrap"> <div class="scroll"> ... </div> </div>
如图:
css样式方面
除了要求wrap有宽高及overflow为hidden,还得对scroll元素设置position为relative或absolute,这样才能设置偏移。
js方面
最简单的就是直接new一个IScroll对象即可,其他配置可直接参考官网的说明:
window.addEventListener('load',function(){ var myScroll = new IScroll('.wrap');}); document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
这里有两个简单的demo:
- 绝对定位布局中间使用iscroll滚动
- 水平滚动,按照官方的实例,水平滚动的时候,整个页面的垂直滚动直接交给浏览器默认处理。
其中绝对定位布局中间使用iscroll滚动效果:
其中两个例子头部都要增加一个JS才能生效:http://www.w3cplus.com/mcommon/iscroll.js
HTML结构为:
<header class="header">iscroll</header> <div id="main" class="wrap-page"> <section class="page" id="wrap" > <div class="page-inner"> <p>可以添加多个内容在这里....</p> </div> </section> </div> <footer class="footer">footer</footer> <script> window.addEventListener('load',function(){var myScroll=new IScroll('#main');}); document.addEventListener('touchmove',function(e){e.preventDefault();},false); </script>
CSS样式为:
.header,.footer{ position:absolute; left:0; right:0; height:44px; line-height:44px; text-align:center;} .header{ top:0; border-bottom:1px solid #f00;} .footer{ bottom:0; border-top:1px solid #f00;} .wrap-page{ position:absolute; top:44px; bottom:44px; left:0; right:0; overflow:hidden;} .page{ position:relative; padding:10px;} .page p{ margin-bottom:10px;}
水平滚动的效果例子:
HTML结构为:
<header class="header">iscroll</header> <div id="main" class="wrap-page"> <section class="page" id="wrap" > <div id="carousel"> <ul> <li><img src="http://placehold.it/93x125" alt=""></li> <li><img src="http://placehold.it/93x125" alt=""></li> <li><img src="http://placehold.it/93x125" alt=""></li> <li><img src="http://placehold.it/93x125" alt=""></li> <li><img src="http://placehold.it/93x125" alt=""></li> <li><img src="http://placehold.it/93x125" alt=""></li> <li><img src="http://placehold.it/93x125" alt=""></li> <li><img src="http://placehold.it/93x125" alt=""></li> <li><img src="http://placehold.it/93x125" alt=""></li> </ul> </div> <div class="page-inner"> <p>可以增加很多内容....</p> </div> </section> </div> <footer class="footer">footer</footer> <script> window.addEventListener('load',function(){ var $carousel=document.getElementById('carousel'), $ul=$carousel.querySelector('ul'), liArray=$carousel.querySelectorAll('li'), liNum=liArray.length; $ul.style.width=(liArray[0].clientWidth + 10)*9+"px"; var carousel=new IScroll('#carousel',{eventPassthrough:true,scrollX:true,scrollY:false,preventDefault:false}); }); </script>
CSS样式为:
.header,.footer{ position:absolute; left:0; right:0; height:44px; line-height:44px; text-align:center;} .header{ top:0; border-bottom:1px solid #f00;} .footer{ bottom:0; border-top:1px solid #f00;} .wrap-page{ position:absolute; top:44px; bottom:44px; left:0; right:0; overflow-y:auto;-webkit-overflow-scrolling:touth;} #carousel{ margin:10px 0; width:100%; height:125px; overflow:hidden;} #carousel ul{ position:relative;} #carousel li{ float:left; margin-left:10px; width:93px; height:125px;}
下面的资料都是iscroll 4的。(虽然官网已经介绍的足够好了,但iscroll的坑还是很多的,多看看总不赖)
参考资料: