jQuery iScroll.js 移动端滚动条美化插件第1/5页

2020-05-27 18:10:10易采站长站整理

所以在弹框调用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);