所以在弹框调用show()显示出来后,再实例化滚动条区域。如下:
$("#mobile_show_duobao_all_num").show();
new iScroll('tc-wrapper2', {
scrollbarClass: 'myScrollbar' ,
hScrollbar:false,
vScroll:true,
hideScrollbar: false //是否隐藏滚动条
}); 提示:出现滑动屏幕时,整个页面滑动的兼容性问题,解决办法如下:
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 2.4、iScroll传参
iScroll里的第二个参数允许你自定义一些内容,比如是否隐藏滚动条等。常用参数如下:
hScroll false 禁止横向滚动 true横向滚动 默认为true
vScroll false 精致垂直滚动 true垂直滚动 默认为true
hScrollbar false隐藏水平方向上的滚动条
vScrollbar false 隐藏垂直方向上的滚动条
fixedScrollbar 在iOS系统上,当元素拖动超出了scroller的边界时,滚动条会收缩,设置为true可以禁止滚动条超出
scroller的可见区域。默认在Android上为true, iOS上为false
fadeScrollbar false 指定在无渐隐效果时隐藏滚动条
hideScrollbar 在没有用户交互时隐藏滚动条 默认为true
bounce 启用或禁用边界的反弹,默认为true
momentum 启用或禁用惯性,默认为true,此参数在你想要保存资源的时候非常有用
lockDirection false取消拖动方向的锁定, true拖动只能在一个方向上(up/down 或者left/right)
2.5、通用方法
refresh 在DOM树发生变化时,应该调用此方法
eg: setTimeout(function () { myScroll.refresh(); }, 0);
3、css部分
自定义滚动条样式时需要给滚动条添加一个class参数,如下
var myscroll=new iScroll("wrapper",{
scrollbarClass: "myScrollbar"
}); 滚动条是由两个元素组合而成的:容器和显示器。容器同wrapper的高度相同,而显示器则代表的是滚动条本身。
html结果如下:
<div class="myScrollbarV">
<div></div>
</div> css如下,可以自行修改:
@charset "utf-8";
/* CSS Document */
/**
*
* Horizontal Scrollbar
*
*/
.myScrollbarH {
position:absolute;
z-index:100;
height:8px;
bottom:1px;
left:2px;
right:7px
}
.myScrollbarH > div {
position:absolute;
z-index:100;
height:100%;
/* The following is probably what you want to customize */
background-image:-webkit-gradient(linear, 0 0, 100% 0, from(#a00), to(#f00));
background-image:-moz-linear-gradient(top, #f00, #900);
background-image:-o-linear-gradient(top, #f00, #900);










