移動端iscroll局部滑動效果的實現及遇到的問題

      移動端局部滑動效果的實現採用的是iscroll插件 ,大家可以看看https://github.com/Slovty/iscroll   ,裏面有demo ,下載下來自己研究研究就差不多了,接下來講講我遇到的問題,記自己.

    1.層錯位的問題  demo裏面設置的是絕對定位( position :absolute),這個問題導致滑動的層充滿了整個屏幕,去掉這個css屬性就ok了.

    2.滑動的時候會滑出屏幕,   在#wrapper 選擇器下 添加 overflow: hidden;

    3.滾動在手機端失效的問題  將onload()函數下面的 touchmove監聽事件去掉就行了,或者註釋.

    4.動態設置scroller的寬度的問題,  在實際應用中,數據是動態的,要計算好每個子項的寬度,,,通過js來給scroller設置寬度,但是一定一定一定要在new IScroll  之前,   因爲這個寬度在new的時候就要傳入iScroll.js.

下面附上我修改過的css代碼

/*房間信息的滑動*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	-ms-touch-action: none;
}

body,ul,li {
	padding: 0;
	margin: 0;
	border: 0;
}

body {
	overflow: hidden; /* this is important to prevent the whole page to bounce */
}


#wrapper {
	float: left;
	overflow: hidden;
	z-index: 20;
	padding: 0px 10px 10px ;
	width: 100%;
	background: #eaeaea;
	
}

#scroller {
	float: left;
	/*position: absolute;*/
	z-index: 20;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
/*	width: 1820px;*/
	height: auto; 
	/*background-color: #a00;*/
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}


#scroller li {
	display: block;
	float: left;
	width: auto;
	height: auto;
	text-align: center;
	color: #999;
	padding: 7.5px;
	font-size: 0.9em;
	margin-bottom: 1px;
}

大家可以根據自己的需要更改.另外還有一個插件應該更好用  swiper   http://www.swiper.com.cn/