淺談一下關于iscroll的使用心得 - dom-liu－IT工程師數位筆記本

文章出處

因為最近的項目所有頁面老板想做成蘋果原生那種上下拉動有回彈效果的體驗，瀏覽器自帶是沒有這種功能的，自己寫的話兼容性可能會出大問題，要適配安卓的各種機型實在是難，所以我還是選擇去使用移動端相對比較穩定的iscroll.js這個插件來實現。。

剛開始使用的是iscroll4的版本，確實坑很多，但又沒辦法，只要一點一點來填。后來項目快做完了，問題也解決的差不多了，聽到群里面有人開始在使用iscorll5的版本，性能還不錯，就是兼容性不強，低版本的安卓機可能體驗很不流暢，于是自己開始琢磨，就有了這篇文章。

以下是我在項目中的使用心得

iscoll4-------------------

更新了一下iscroll4的demo---------------------------------------------2016.11.14

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="reset.css"/>
		<style>
			#wrapper{
			    width:100%;
			    height:100%;
			    position:absolute;
			    z-index:1;
			}
			li{
				width: 100%;
				height: 100px;
				background: red;
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div id = "wrapper">
		    <ul>
		    	<li></li>
		    	<li></li>
		    	<li></li>
		    	<li></li>
		    	<li></li>
		    	<li></li>
		    </ul>
		</div>
		<script src="iscroll.js"></script>
		<script type="text/javascript">
			var myScroll=new iScroll("wrapper",{
			    hScrollbar:false, 
			    vScrollbar:false,
			    onScrollMove: function () {
			         if((this.y < this.maxScrollY) && (this.pointY < 1)){
			          this.scrollTo(0, this.maxScrollY, 400);
			          return;
			         } else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {
			          this.scrollTo(0, 0, 400);
			          return;
			         }
			    }
			});
			 
			function Refresh() {
			    setTimeout(function () {
			        myScroll.refresh();
			    }, 1000);
			}
		</script>
	</body>
</html>

其中的iscroll4.js和reset.css文件大家可以從網上下載，這個demo是可以跑起來的。　　

需要使用這個文件配合使用

把需要滾動的區域放置ul中

<ul>

</ul>

</div>

css的樣式重點在于

#wrapper{

width:100%;

height:100%;

position:absolute;

z-index:1;

}

引入下面的js

var myScroll=new iScroll("wrapper",{

hScrollbar:false,

vScrollbar:false,

onScrollMove: function () {

if((this.y < this.maxScrollY) && (this.pointY < 1)){

this.scrollTo(0, this.maxScrollY, 400);

return;

} else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {

this.scrollTo(0, 0, 400);

return;

}

});

function Refresh() {

setTimeout(function () {

myScroll.refresh();

}, 1000);

}

iscroll有個問題就是：它會與swiper的輪播圖沖突，只要輪播圖滑動就會直接跳鏈接，解決的方案就是給swiper里面配置一個阻止touchmove冒泡事件的屬性 touchMoveStopPropagation : false, 這樣就能解決問題。

下面介紹iscroll5demo------------------------iscroll5的js大家可以去網上下載

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" type="text/css" href="../reset.css"/>
        <!-- Link Swiper's CSS -->
        <link rel="stylesheet" href="../swiper.css">
        <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: blue;
        }
            header{
                /*position: fixed;
                top: 0;*/
                background: red;
                width: 100%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                z-index: 99;
            }
            #wrap{
                /*margin-top:40px;*/
                overflow: hidden;
            }
            section{
                background: green;
                height: 300px;
                margin-bottom: 1px;
                color: white;
            }
            /*#wrapper{
                position: absolute;
                height: 100%;
                width: 100%;
                z-index: 1;
            }*/
            html,body{
                height: 100%;
                overflow: hidden;
            }
        
            .box{
                display:box;
                display: -webkit-box;
                display: flex;
                display:-webkit-flex; 
                overflow: hidden; 
                flex-direction: column; 
                width: 100%;
                height:100%;
                -webkit-box-orient: vertical; 
            }
            #wrapper{
                overflow: hidden;
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1; 
                
            }
    .swiper-container {
        width: 100%;
        height: 200px;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-slide a{
        width: 100%;
        height: 100%;
    }
        </style>
    </head>
    <body>
        <div class="box">
            <header>導航欄</header>
            <div id="wrapper">
                <div id="wrap">
                    <!-- Swiper -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><a href="../../3d熱氣球.html">Slide 1</a></div>
                            <div class="swiper-slide"><a href="../../3d熱氣球.html">Slide 2</a></div>
                            <div class="swiper-slide"><a href="../../3d熱氣球.html">Slide 3</a></div>
                            <div class="swiper-slide"><a href="../../3d熱氣球.html">Slide 4</a></div>
                        </div>
                        
                        <div class="swiper-pagination"></div>
                    </div>
                    <section>1</section>
                    <section>2</section>
                    <section>3</section>
                    <section>4</section>
                    <section>5</section>
                </div>
            </div>
        </div>
        <script src="zepto.js"></script>
        <script src="../swiper.js"></script>
        
        <script type="text/javascript" src="iscroll.js" ></script>
        <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true
        });
        var myscroll;
        function loaded(){
            setTimeout(function(){
                myscroll=new IScroll("#wrapper");
            },100 );
        }
        window.addEventListener("load",loaded,false);

        $("#wrapper").one("touchstart",function(){
            myscroll.refresh();
        });
        </script>
    </body>
</html>

index.html

這是一個測試DOME,iscroll5使用結構和上述一樣，而且不會和swiper沖突，可以采用flexbox來布局，但在一些低端機上面會出現上下滑很卡頓的情況，目前不清楚是因為布局的原因還是iscroll5的原因，有待進一步測試。

----------------------------------------------------------------------------------------------------------------2016.9.12

1.頁面在移動端滾動條移動變得非常卡，最后加上了document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);滾動條變得很流暢還可以加上css樣式給scroll元素增加css樣式：-webkit-transform:translate3d(0,0,0);.

2.關于頁面在不刷新的情況下如果添加了新的模塊或者高度發生了變化會導致無法下拉的情況，使用iscroll5可以解決這個問題，就是在你觸發了變化的事件之后，加上myscroll.refresh(); 去調用它自帶的刷新方法。

------------------------2016.10.8

文章列表