前端插件iscroll.js的使用

ゞ浴缸里的玫瑰 2022-01-23 06:21 262阅读 0赞

参考：[https://www.cnblogs.com/starof/p/5215845.html][https_www.cnblogs.com_starof_p_5215845.html]

## 前端插件iscroll.js的使用 ##

GitHub下载地址

> [https://github.com/cubiq/iscroll][https_github.com_cubiq_iscroll]

**开始**  
基本结构：

iScroll一定要与滚动内容外的wrapper配合才能生效  
因为只有wrapper里的第一个子元素才可以滚动，所以要让多个元素滚动，写法如下：

**需要注意的是：** 滚动区域的大小要大于父容器的大小，这样才能实现滚动效果  
**JS初始化**

常用功能：

*  scrollX，水平滚动，默认false
 *  scrollY，垂直滚动，默认true
 *  click，是否允许点击，默认false

**基本功能**

*  options.bounce  
    当滚动器到达容器边界时他将执行一个小反弹效果。默认值：true
 *  options.click  
    为了重写原生滚动条，iScroll禁止了一些默认的浏览器行为，比如鼠标的点击。如果你想你的应用程序响应click事件，那么该设置次属性为true。默认值：false
 *  options.scrollX  
    options.scrollY  
    默认情况下只有纵向滚动条可以使用。如果你需要横向滚动条，需要将scrollX属性值设置为true。默认值：scrollX：true，scrollY：false
 *  options.startX  
    options.startY  
    默认情况下iScroll从0，0（top left）位置开始，通过此属性可以让滚动条从不同位置开始滚动。默认值：0

**滚动条**

*  options.scrollbars  
    激活滚动条只需要做一件事情：

var myScroll = new IScroll('#wrapper', {
        scrollbars: true
    });

*  options.fadeScrollbars  
    不想使用滚动条淡入淡出方式时，需要设置此属性为false。默认值：false
 *  options.interactiveScrollbars  
    此属性可以让滚动条能拖动，用户可以与之交互。默认值：true
 *  options.resizeScrollbars  
    滚动条尺寸改变基于容器和滚动区域的宽/高之间的比例。此属性设置为false让滚动条固定大小。默认值：true

[https_www.cnblogs.com_starof_p_5215845.html]: https://www.cnblogs.com/starof/p/5215845.html
[https_github.com_cubiq_iscroll]: https://github.com/cubiq/iscroll