移动端重构系列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滚动效果:

其中两个例子头部都要增加一个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的坑还是很多的,多看看总不赖)

参考资料:

posted @ 2015-01-04 11:47  chenguiya  阅读(179)  评论(0)    收藏  举报