弹窗出现怎么禁用iscrolld的vscroll
1个回答
展开全部
弹窗出现怎么禁用iscrolld的vscroll
使用iscroll实现这样的布局可不容易。。。需要前端拥有良好的css功底然后利用js(这里lz用了zeptoJS或者大家可以用jquery)
假设我们有这么一段html
[html] view plaincopy
<div id="wrapperIndexActivity" class="wrapperIndexActivity">
<div class="scrollerActivity" id="scrollerActivity">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
首先先对ID(wrapperIndexActivity)加载iscroll
[javascript] view plaincopy
var homeScroll = new iScroll("wrapperIndexActivity", {
snap : true,
momentum : false,
hScrollbar : false,
vScrollbar : false,
checkDOMChanges : true,
onScrollEnd : function() {
}
});
对Id所属class附加样式:
[css] view plaincopy
.wrapperIndexActivity{ width:100%;height:100%;position:relative; z-index:1;overflow:hidden;display: block;}
然后需要对ID(scrollerActivity)计算有几幅屏幕可以切换(这里假设有4幅)
[javascript] view plaincopy
$("#scrollerActivity").style({
'width' : document.body.clientWidth * 4 + 'px'
});
对应class需附加样式:
[css] view plaincopy
.wrapperIndexActivity .scrollerActivity{ height:100%; float:left; padding:0;overflow:hidden;}
再然后对li 让每一个列表项都撑满屏幕
[javascript] view plaincopy
$('#wrapperIndexActivity ul li ').style({
'width' : document.body.clientWidth + "px"
});
对应class附加样式:
[css] view plaincopy
.wrapperIndexActivity .scrollerActivity ul li {-webkit-box-sizing:border-box; display:block; height:100%; float:left;}
最后刷新iscroll
[javascript] view plaincopy
// 刷新数据
omeScroll.refresh();
使用iscroll实现这样的布局可不容易。。。需要前端拥有良好的css功底然后利用js(这里lz用了zeptoJS或者大家可以用jquery)
假设我们有这么一段html
[html] view plaincopy
<div id="wrapperIndexActivity" class="wrapperIndexActivity">
<div class="scrollerActivity" id="scrollerActivity">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
首先先对ID(wrapperIndexActivity)加载iscroll
[javascript] view plaincopy
var homeScroll = new iScroll("wrapperIndexActivity", {
snap : true,
momentum : false,
hScrollbar : false,
vScrollbar : false,
checkDOMChanges : true,
onScrollEnd : function() {
}
});
对Id所属class附加样式:
[css] view plaincopy
.wrapperIndexActivity{ width:100%;height:100%;position:relative; z-index:1;overflow:hidden;display: block;}
然后需要对ID(scrollerActivity)计算有几幅屏幕可以切换(这里假设有4幅)
[javascript] view plaincopy
$("#scrollerActivity").style({
'width' : document.body.clientWidth * 4 + 'px'
});
对应class需附加样式:
[css] view plaincopy
.wrapperIndexActivity .scrollerActivity{ height:100%; float:left; padding:0;overflow:hidden;}
再然后对li 让每一个列表项都撑满屏幕
[javascript] view plaincopy
$('#wrapperIndexActivity ul li ').style({
'width' : document.body.clientWidth + "px"
});
对应class附加样式:
[css] view plaincopy
.wrapperIndexActivity .scrollerActivity ul li {-webkit-box-sizing:border-box; display:block; height:100%; float:left;}
最后刷新iscroll
[javascript] view plaincopy
// 刷新数据
omeScroll.refresh();
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询