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