iscroll.js

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>iscroll.js</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

    

<script src="http://files.cnblogs.com/xinlinux/iscroll.js"></script> 

<style type="text/css">



#wrapper{

    overflow:hidden;

}



</style>



</head>

<body>

    

    <div id="wrapper" class="c1">



        <div id="scroller">



               <ul>



                    <li>

                        <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">,动动小指,告诉我你想吃啥呦。</p>

                        <p>晚上21:00~23:00进行配送.</p><p>电话:18829242503 QQ:2476403790</p>

                    </li>

                    

                    <li>

                        <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">,动动小指,告诉我你想吃啥呦。</p>

                        <p>晚上21:00~23:00进行配送.</p><p>电话:18829242503 QQ:2476403790</p>

                    </li>

                    <li>

                        <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">,动动小指,告诉我你想吃啥呦。</p>

                        <p>晚上21:00~23:00进行配送.</p><p>电话:18829242503 QQ:2476403790</p>

                    </li>

                    

                    <li>

                        <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">,动动小指,告诉我你想吃啥呦。</p>

                        <p>晚上21:00~23:00进行配送.</p><p>电话:18829242503 QQ:2476403790</p>

                    </li>

                    <li>

                        <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">,动动小指,告诉我你想吃啥呦。</p>

                        <p>晚上21:00~23:00进行配送.</p><p>电话:18829242503 QQ:2476403790</p>

                    </li>

                    

                    <li>

                        <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">,动动小指,告诉我你想吃啥呦。</p>

                        <p>晚上21:00~23:00进行配送.</p><p>电话:18829242503 QQ:2476403790</p>

                    </li>



                    <li>



                        <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">,动动小指,告诉我你想吃啥呦。</p>

                        <p>晚上21:00~23:00进行配送.</p><p>电话:18829242503 QQ:2476403790</p>

                    </li>

                    <li>



                        <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">,动动小指,告诉我你想吃啥呦。</p>

                        <p>晚上21:00~23:00进行配送.</p><p>电话:18829242503 QQ:2476403790</p>

                    </li>



                    <li>



                        <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">,动动小指,告诉我你想吃啥呦。</p>

                        <p>晚上21:00~23:00进行配送.</p><p>电话:18829242503 QQ:2476403790</p>

                    </li>

                    <li>



                        <p>亲们挨饿,我等罪该万死<img src="http://wx.podapi.com/resource/script/kindeditor/plugins/emoticons/images/9.gif" border="0" alt="">,动动小指,告诉我你想吃啥呦。</p>

                        <p>晚上21:00~23:00进行配送.</p><p>电话:18829242503 QQ:2476403790</p>

                    </li>



                </ul>



       </div>



</div>

    

    <script>

        $(function(){

        

            $('body,html').css('overflow','hidden');

            

            loaded("wrapper","c1","scroller");

            

            

            

            

        })

        

        

        function loaded(id,part,nextD){      

        

            var minH  = document.documentElement.clientHeight || document.body.clientHeight;

            var  offT = $('.'+part).offset().top;

            var offH = $('#'+nextD).height();

            var boxMinH = minH-offT-10;

            if(boxMinH<=offH){

                $('.'+part).css({'height':boxMinH+'px'})

            }

            

            myScroll = new iScroll(id,{vScrollbar:false,hScroll:false,fixedScrollbar:true})

        }

    

    </script>

    

    

</body>

</html>

 

iScroll里传递的参数 



        iScroll里的第二个参数允许你自定义一些内容,比如下面的这段代码: 



       <script> 



                 var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false}); 



       </script> 



       第二个参数通常都是一个对象,像上面的这个例子里就设定了不显示滚动条。常用的参数如下: 



               hScroll               false 禁止横向滚动 true横向滚动 默认为true 



               vScroll               false 精致垂直滚动 true垂直滚动 默认为true 



               hScrollbar         false隐藏水平方向上的滚动条 



               vScrollbar         false 隐藏垂直方向上的滚动条 



               fixedScrollbar  在iOS系统上,当元素拖动超出了scroller的边界时,滚动条会收缩,设置为true可以禁止滚动条超出 



                                        scroller的可见区域。默认在Android上为true, iOS上为false 



               fadeScrollbar  false 指定在无渐隐效果时隐藏滚动条 



               hideScrollbar  在没有用户交互时隐藏滚动条 默认为true 



               bounce            启用或禁用边界的反弹,默认为true 



               momentum     启用或禁用惯性,默认为true,此参数在你想要保存资源的时候非常有用 



               lockDirection  false取消拖动方向的锁定, true拖动只能在一个方向上(up/down 或者left/right) 



                为了保持资源的完整性,建议去除滚动条 

 // 详细解释:

  <script>

        $(function(){

        

            $('body,html').css('overflow','hidden');

            

            loaded("wrapper","c1","scroller");

            

        })

        

        

        function loaded(id,part,nextD){      

        

            var minH  = document.documentElement.clientHeight || document.body.clientHeight;

        

            var  offT = $('.'+part).offset().top;

            var offH = $('#'+nextD).height();

            var boxMinH = 200;

            

            alert(minH);   //BOdy页面高度;

            alert(offT);    // this 距离上面的距离;

            alert(offH);    //    内容的高度;

            alert(boxMinH);    //    显示内容的高度;

            

            

            

            if(boxMinH<=offH){

            

                $('.'+part).css({'height':boxMinH+'px'})

                

            }

            

            myScroll = new iScroll(id,{vScrollbar:false,hScroll:false,fixedScrollbar:true})

        }

    

    </script>

    

 

你可能感兴趣的:(scroll)