（转）移动端滚动条插件

今天在做一个单页面的手机端项目时，遇到介样的需求：

所有页面都是禁用滚动条的，但其中有一个页面的图片很长，需要出现滚动条浏览。

哎呦我去，于是我想着用iscroll插件解决掉算了，于是到github上下载下来部署到项目中，用多个iPhone手机测试了都不行。这下子伤心了，说好的酣畅淋漓滑动呢？？

于是我便网上搜索了一下，发现大神［张鑫旭］的博客里有这款“神器” ［simpScroller］，于是便下载下来试了下，果然比iscroll好用多了，一下子就解决掉问题了。哈哈，得感谢这位大神啊，膜拜了。后期一定要好好研究他的插件怎么写的。

简单说一下使用方法，具体可以去大神的博客学习哦：

基本使用以及APIs

simpScroller方法不依赖任何JavaScript框架，几乎无冲突可能，可放心使用。

js:

1
2
3
[html] view plain copy
 
  1. if (window.addEventListener) {  
  2.     simpScroller(document.querySelector(".vertical"));    
  3. }  

container表示需要滚动的容器，如果垂直滚动，要定高。options为可选参数，具体见下：

1
2
3
4
5
6
7
[html] view plain copy
 
  1. {  
  2.     verticalScroll: true,          // 默认垂直滚动  
  3.     horizontalScroll: false,       // 水平滚动，默认false，不水平滚动  
  4.     hideScrollBar: false,          // 是否隐藏滚动条  
  5.     onScroll: function() {}        // 滚动时候的回调  
  6.                                    // 支持一个参数，为event对象   
  7. }  

滚动条的UI放在外部CSS中了，方便控制，全部CSS如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[html] view plain copy
 
  1. .scroller_vertical,  
  2. .scroller_horizontal {    
  3.     border-radius: 2.5px;  
  4.     background-color: rgba(0,0,0,.35);  
  5.     -webkit-transition: opacity .5s;  
  6.             transition: opacity .5s;  
  7.     position: absolute;  
  8.     opacity: 0;  
  9. }  
  10. .scroller_vertical {  
  11.     width: 5px;  
  12.     right: 0;  
  13. }  
  14. .scroller_horizontal {  
  15.     height: 5px;  
  16.     bottom: 0;  
  17. }  

下面贴一下demo的二维码，有兴趣的朋友可以微信扫一扫看下：

本篇完，谢谢，有问题请留言。

 
 
posted @ 2016-09-27 20:42  五艺  阅读(1052)  评论(1)    收藏  举报