前端插件iscroll.js的使用

参考:https://www.cnblogs.com/starof/p/5215845.html

前端插件iscroll.js的使用

GitHub下载地址

https://github.com/cubiq/iscroll

开始
基本结构:

  • ...
  • ...
  • ...

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

  • ...
  • ...

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

            //引入相关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

你可能感兴趣的:(前端插件iscroll.js的使用)