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,
)};
}