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

<div id="wrapper">
<ul>
<li></li>
.....
</ul>
</div> 

<div id="wrapper">
<div id="scroller">
<ul>
<li></li>
...
</ul>
<ul>
<li></li>
...
</ul>
</div>
</div> 

<script src="/UploadFiles/2021-04-02/iscroll.js">

2.2、使用onLoad事件实现滚动


因为DOMContentLoaded事件是载入DOM结构后就会被调用，所以在图片等元素未载入前可能无法确定滚动区域的长宽，此时可以使用onLoad事件来实现。


<script src="/UploadFiles/2021-04-02/iscroll.js">

这种情况下iScroll会在页面资源（包括图片）加载完毕100ms之后得到初始化，这应该是一种比较安全的调用iScroll的方式。


2.3、弹框中的滚动条加载 


弹框一般用display:none和display:block切换来实现。 


display:none的元素浏览器没有渲染，所以无法计算滚动内容的高度。


所以在弹框调用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);
border:1px solid #900;
-webkit-background-clip:padding-box;
-moz-background-clip:padding-box;
-o-background-clip:padding-box;
background-clip:padding-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
-o-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}
/**
*
* Vertical Scrollbar
*
*/
.myScrollbarV {
position:absolute;
z-index:100;
width:8px;bottom:7px;top:2px;right:1px
}
.myScrollbarV > div {
position:absolute;
z-index:100;
width:100%;
/* The following is probably what you want to customize */
background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
background-image:-moz-linear-gradient(top, #f00, #900);
background-image:-o-linear-gradient(top, #f00, #900);
border:1px solid #900;
-webkit-background-clip:padding-box;
-moz-background-clip:padding-box;
-o-background-clip:padding-box;
background-clip:padding-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
-o-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
} 


二、示例


1、html+js


iScroll.js




/*!
* iScroll v4.2.5 ~ Copyright (c) 2012 Matteo Spinelli, http://cubiq.org
* Released under MIT license, http://cubiq.org/license
*/
(function(window, doc){
var m = Math,
dummyStyle = doc.createElement('div').style,
vendor = (function () {
var vendors = 't,webkitT,MozT,msT,OT'.split(','),
t,
i = 0,
l = vendors.length;
for ( ; i < l; i++ ) {
t = vendors[i] + 'ransform';
if ( t in dummyStyle ) {
return vendors[i].substr(0, vendors[i].length - 1);
}
}
return false;
})(),
cssVendor = vendor "pagenum tc">12345下一页阅读全文

        
        

            
上一篇：AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
            
下一篇：JavaScript 正则表达式中global模式的特性
        
        
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。