移动端重构系列7——滚动
2015-09-30 16:13
344 查看
移动端重构系列-mobile
本系列文章,如果没有特别说明,兼容安卓4.0.4+原生滚动
原生滚动的属性为:-webkit-overflow-scrolling:touch;,如果是走高富帅的苹果路线,是没问题的,谁让这是人家亲生的呢;如果是安卓的话,我真不知道是支持还是不支持,说不支持吧好像有点缓动效果,说支持吧好像把这条属性砍掉也一样,感兴趣的可以自己测试下(添加或删除这个属性对比下)
原生滚动支持测试:
overflow-scrolling 测试1
overflow-scrolling 测试2
iscroll模拟
既然原生的安卓上不太靠谱,那就有必要用js来解决了,因为本人不擅长js,所以直接上iscroll,现在iscroll也已经到第五版本了,iscroll的github上有很全的例子,虽然比较简单,不过入门还是不错的。这里我也搞了两个demo,在demo之前,有必要先说明下使用iscroll应该注意的一些事项:html结构方面
iscroll要求至少两层结构,wrap是一个固定的容器,overflow为hidden,而scroll为滚动的内容,如果开启translate(默认开启),则使用translate来实现偏移滚动,如果没有则使用left/top来实现偏移滚动。如果wrap下面有多个直接子元素,即scroll有其他兄弟元素则只对第一个子元素滚动,其他的自动忽略。(wrap和scroll的class是随便的,主要就是得有两层结构)
<div class="wrap"> <div class="scroll"> ... </div> </div>
如图:
css样式方面
除了要求wrap有宽高及overflow为hidden,还得对scroll元素设置position为relative或absolute,这样才能设置偏移。
js方面
最简单的就是直接new一个IScroll对象即可,其他配置可直接参考官网的说明:
window.addEventListener('load',function(){ var myScroll = new IScroll('.wrap');}); document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
献上两个简单的demo:
绝对定位布局中间使用iscroll滚动
水平滚动,按照官方的实例,水平滚动的时候,整个页面的垂直滚动直接交给浏览器默认处理。
由于本人的js水平实在有限,关于这个我也分析不出来什么来龙去脉,摘录几篇文章以供想学习的参考下吧。下面的资料都是iscroll 4的。(虽然官网已经介绍的足够好了,但iscroll的坑还是很多的,多看看总不赖)
参考资料:
iScroll 4.2.5 中文API
web app开发利器 - iscroll4 解决方案
iscroll4 精讲
如需转载,烦请注明出处:/article/1214284.html
相关文章推荐
- Android手机拍照上传旋转90度问题
- 实现从一个应用程序内部跳转到另一个应用程序的Demo
- Android View 事件分发机制 && Android ViewGroup 事件分发机制 源码解析 --总结
- Font-Awesome for android
- 自己整理的iOS代码编写规范
- Android EditText 重新获得焦点
- 微信接口开发 php版的
- iOS 原生态API实现二维码的扫描功能
- 总结分享十大iOS开发者最喜爱的库
- 介绍一个轻量级iOS安全框架:SSKeyChain
- iOS---Url编解码的问题
- APP安全测试收集
- Android中内容观察者的使用---- ContentObserver类详解
- Android环境搭建Appium测试框架 Python
- 如何判断ios设备类型
- Android中的复制粘贴
- iOS中关于属性@property和@synthesize的问题:
- Android的init过程详解(一)
- iOS免证书打包环境搭建
- Android Android Studio 快捷键整理分享,IntelliJ IDEA使用技巧一览表