Iscoll 4 同一页面中,一块内容,能够滚动上下并且左右同存效果 (1)

Andriod 原生的一个控件可以实现 上下，左右同存效果，在Webapp里面想实现这个效果，要么自己写大段代码，要么采取第三方插件。

我使用的是 IScroll 4. 虽然还有一些瑕疵,但是凑合还是能用.

 

html代码部分如下： 主体内容开始 中间的为左右滚动，外层的wrapper为控制上下滚动。

<div id="wrapper">
	<div id="scroller">
		<div id="thelist">
        	
                   <!---主体内容开始-->
        
			<div id="wrapper_w">
				<div id="scroller_w">
					<ul id="thelist_w">
						<li id=l101 ><div   style="position:relative; width:100%;height:1000px;"><img src="images/detailbg.jpg"  style="width:100%"></div></li>
						<li id=l102 ><div   style="position:relative; width:100%;height:1000px;"><img src="images/detailbg.jpg"  style="width:100%"></div></li>
						<li id=l103 ><div   style="position:relative; width:100%;height:1000px;"><img src="images/detailbg.jpg"  style="width:100%"></div></li>
						<li id=l104 ><div   style="position:relative; width:100%;height:1000px;"><img src="images/detailbg.jpg"  style="width:100%"></div></li>
						<li id=l105 ><div   style="position:relative; width:100%;height:1000px;"><img src="images/detailbg.jpg"  style="width:100%"></div></li>
						 
					</ul>
				</div>
			</div>


		<!---主体内容结束-->

		</div>
	</div>
</div>

 

 css 部分: @media screen and (max-width: 360px) 这里可以根据屏幕，来自动调节。

#wrapper {
	position:absolute; z-index:1;
	top:80px; bottom:60px; left:0;
	width:100%;
	background:#fff;
	overflow:auto;
}

#scroller {
	position:relative;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);

	float:left;
	width:100%;
	padding:0;
}

#scroller ul {
	position:relative;
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

#scroller li {
	padding:0 0px;
	height:100%;
	line-height:1.8em;
	font-size:1.3em;
}

#scroller li > a {
	display:block;
}

 


@media screen and (max-width: 360px) {
	
	#wrapper_w {width:360px;}

	#scroller_w {width:1800px;}

	#scroller_w li {width:360px; }
	
}




@media screen and (max-width: 320px) {
	
	#wrapper_w {width:320px;}

	#scroller_w {width:1600px;}

	#scroller_w li {width:320px; }
	
	#new_img {width:100%; height:140px; overflow:hidden;}
	#new_text {width:100%; height:1px; top:95px; left:0;position: relative;}
#new_text .text {width:100%; position:relative; height:40px; line-height:40px; font-size:140%; color:#fff; text-align:center;}
	
}

js 部分

 
var myScroll_w;
function loaded_w() {
	
	myScroll_w = new iScroll('wrapper', {
		scrollbarClass: 'myScrollbar' 
		});
}


document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded_w, false);

//
var myScroll;

var firstscroll=1; 
function loaded() {
	myScroll = new iScroll('wrapper_w', {
		snap: true,
		momentum: false,
		hScrollbar: false,
		vScroll: false,
	)};
}