都说iScroll是移动端开发必学的库之一,先来看看为啥要用iScroll。网上找了找资料,总结下原因如下:

1、position:fixed 在移动端浏览器上的兼容性不好

简单列举如下:

IOS的Safari :

  • IOS5及以后的版本支持该属性,
  • IOS4及以下会把它当成默认的 position: static, 跟着页面一起滚动

Android :

  • Android 2.1及以下不支持
  • Android 2.2会在滚动完成之后把定位的元素拉回到原来的位置
  • Android 2.3 只有在禁止页面缩放的情况下才支持固定定位
  • Android 3 和 4 支持

更多的机型和浏览器版本请戳这里

2、原生的滚动在手机浏览器上不太流畅,体验不好

3、暂时没有了,以后有了再补充

入门

基本的DOM结构如下:

<header>IScoll</header>
<div id="wrapper"><ul><li></li>...</ul>
</div>
<footer>Footer</footer>

外部容器的 id 必须为 wrapper 这是源码里写死的,只有容器的第一个子元素才能滚动,上面的代码中,滚动的是ul。

给wrapper添加一个 position: relative 或者 absolute 可以解决很多因错误计算容器尺寸造成的问题。

每个需要滚动的区域都需要进行初始化,初始化代码如下

document.addEventListener('DOMContentLoaded', loadHandler, false);function loadHandler(){var myScroll = new IScroll('#wrapper');
}

然后就可以滚动了,超级简单有木有!!

初始化代码最好放在 window onload 事件处理函数中,或者 DOMContentLoaded 事件处理函数中,脚本需要知道滚动区域的宽/高,如果有一些图片没有指定宽高,IScroll可能会错误地计算滚动尺寸。

如果DOM结构比较复杂,onload之后留出100到200毫秒的时间给iScroll初始化是比较明智的,

另外,文档里还有这样一段话:

box-shadow, opacity, text-shadow 和 alpha 通道这些属性不能和硬件加速很好的结合。当只有少量元素时,滚动效果会很流畅,但是一旦你的DOM结构变的很复杂,就会体验很渣.

配置参数说明

hScroll: true, //是否水平滚动
vScroll: true, //是否垂直滚动
x: 0, //滚动水平初始位置
y: 0, //滚动垂直初始位置
snap: true, //值可以为true或是DOM元素的tagname,当为true时,对齐的坐标会根据可滚动的位置和滚动区域计算得到可滑动几页,如果为tagname,则滑动会对齐到元素上
bounce: true, //是否超过实际位置反弹
bounceLock: false, //当内容少于滚动是否可以反弹,这个实际用处不大
momentum: true, //动量效果,拖动惯性
lockDirection: true, //当水平滚动和垂直滚动同时生效时,当拖动开始是否锁定另一边的拖动
useTransform: true, //是否使用CSS形变
useTransition: false, //是否使用CSS变换
topOffset: 0, //已经滚动的基准值(一般情况用不到)
checkDOMChanges: false, //是否自动检测内容变化(这个检测不是很准)//Scrollbar相关参数,通过scrollbar这些参数可以配置iscroll的滚动条,通过scrollbarClass可以自己定义一套滚动条的样式。
hScrollbar: true, //是否显示水平滚动条
vScrollbar: true, //同上垂直滚动条
fixedScrollbar: isAndroid, //对andriod的fixed
hideScrollbar: isIDevice, //是否隐藏滚动条
fadeScrollbar: isIDevice && has3d, //滚动条是否渐隐渐显
scrollbarClass: '', //自定义滚动条的样式名//Zoom放大相关的参数,通过它,对于一个固定显示图片区域的类似应用,可以非常简单的做到固定滚动,包括两指放大的应用。
zoom: false, //默认是否放大
zoomMin: 1, //放大的最小倍数
zoomMax: 4, //最大倍数
doubleTapZoom: 2, //双触放大几倍
wheelAction: 'scroll', //鼠标滚动行为(还可以是zoom)//自定义Events相关参数
onRefresh: null, //refresh 的回调,关于自身何时调用refresh 后面会继续谈到
onBeforeScrollStart: function(e){ e.preventDefault(); }, //开始滚动前的时间回调,默认是阻止浏览器默认行为
onScrollStart: null, //开始滚动的回调
onBeforeScrollMove: null, //在内容移动前的回调
onScrollMove: null, //内容移动的回调
onBeforeScrollEnd: null, //在滚动结束前的回调
onScrollEnd: null, //在滚动完成后的回调
onTouchEnd: null, //手离开屏幕后的回调
onDestroy: null, //销毁实例的回调
onZoomStart: null, //开始放大前的回调
onZoom: null, //放大的回调
onZoomEnd: null //放大完成后的回调

方法

destroy
顾名思义,是用来销毁你实例化的iScroll 实例,包括之前绑定的所有iscroll 事件。 refresh
这个方法非常有用,当你的滚动区域的内容发生改变 或是 滚动区域不正确,都用通过调用refresh 来使得iscroll 重新计算滚动的区域,包括滚动条,来使得iscroll 适合当前的dom。 scrollTo
这个方法接受4个参数 x, y, time, relative x 为移动的x轴坐标,y为移动的y轴坐标, time为移动时间,relative表示是否相对当前位置。 scrollToElement
这个方法实际上是对scrollTo的进一步封装,接受两个参数(el,time),el为需要滚动到的元素引用,time为滚动时间。 scrollToPage
此方法接受三个参数(pageX,pageY,time) 当滚动内容的高宽大于滚动范围时,iscroll 会自动分页,然后就能使用scrollToPage方法滚动到页面。当然,当hscroll 为false 的时候,不能左右滚动。pageX这个参数就失去效果 disable
调用这个方法会立即停止动画滚动,并且把滚动位置还原成0,取消绑定touchmove, touchend、touchcancel事件。 enable
调用这个方法,使得iscroll恢复默认正常状态 stop
立即停止动画 zoom
改变内容的大小倍数,此方法接受4个参数,x,y,scale,time 分别表示的意思为,放大的基准坐标,以及放大倍数,动画时间 isReady
当iscroll 没有处于正在滚动,没有移动过,没有改变大小时,此值为true

转载于:https://www.cnblogs.com/walle2/p/4830948.html

iScroll学习笔记相关推荐

  1. 《JavaScript学习笔记》

    JavaScript编程语言 1.1.编程 编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序:就是计算机所执行的一系列的指令集和,而程序都是用我们 ...

  2. PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 call

    您的位置 首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 发布: 2017年8月4日 7,195阅读 ...

  3. 容器云原生DevOps学习笔记——第三期:从零搭建CI/CD系统标准化交付流程

    暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...

  4. 容器云原生DevOps学习笔记——第二期:如何快速高质量的应用容器化迁移

    暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...

  5. 2020年Yann Lecun深度学习笔记(下)

    2020年Yann Lecun深度学习笔记(下)

  6. 2020年Yann Lecun深度学习笔记(上)

    2020年Yann Lecun深度学习笔记(上)

  7. 知识图谱学习笔记(1)

    知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用 知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...

  8. 计算机基础知识第十讲,计算机文化基础(第十讲)学习笔记

    计算机文化基础(第十讲)学习笔记 采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...

  9. Go 学习推荐 —(Go by example 中文版、Go 构建 Web 应用、Go 学习笔记、Golang常见错误、Go 语言四十二章经、Go 语言高级编程)

    Go by example 中文版 Go 构建 Web 应用 Go 学习笔记:无痕 Go 标准库中文文档 Golang开发新手常犯的50个错误 50 Shades of Go: Traps, Gotc ...

最新文章

  1. 如何跨过Docker集群网络Weave遇到的“坑”?
  2. C/C++ 静态库和动态库的区别
  3. python 3.0内置函数map、filter
  4. boost::statechart模块实现类型信息测试
  5. 博客转移至 https://www.babac.cn/
  6. Java面试题整理,java常用排序算法图解
  7. 投票源码程序_基于用户投票的排名算法
  8. GNU make使用(二)
  9. JAVA虚拟机内存分配原则 (转
  10. 检验多重共线性matlab_异方差太难?检验通不过?横截面分析难题的十大暴击!...
  11. python爬虫之数据提取Xpath(爬取起点中文网案例)
  12. Paper--3d reconstruction:Photo Tourism: Exploring Photo Collections in 3D
  13. 十大热门编程语言入门难度排名
  14. qt离线下载地址5.14.2
  15. the oracle of bacon,python爬虫之遍历单个域名
  16. 报错:org.springframework.security.web.firewall.RequestRejectedException: The request was not ......
  17. 渗透测试——sql注入进阶/基于时间的盲注/一看就会/
  18. AD20/Altium designer——如何生成Gerber打板文件
  19. 四川省房产测绘实施细则[2010版]-1
  20. go依赖包下载加速方法及github加速

热门文章

  1. Loadrunner--运行场景报Socket descriptor not found错误
  2. 数组|leetcode209.长度最小的子数组
  3. 了解※数据科学※(一)之数据的概念及一个数据科学项目的流程分析
  4. a类论文 计算机视觉,【科研新进展】(21)我校教师首次在计算机视觉领域A类会议上发表论文...
  5. python中forward函数的引用_pytorch 调用forward 的具体流程
  6. python发送json数据_在Websockets上发送JSON
  7. 全球服务器系统市场份额,IDC发布2017年第一季度全球融合系统报告 超融合市场最火爆...
  8. 华东政法大学教学管理系统_中国科学技术大学1022万采购3包生命科学仪器
  9. postgres 把一个表的值转成另一个表的字段名_Phoenix系列创建Phoenix映射表
  10. 正则表达式给html添加属性,正则表达式替换html元素属性的方法