iOS Web APP的滚动部分
August/8th 2014

在iOS系统里面,任意webview在可滚动状态下,都是可以拖超出边界然后反弹回来的。这个效果非常的好看和实用。但是如果我要做一个web app,我就不希望我的整个app界面也被用户拖动。

在很久以前,iOS的浏览器是不支持overflow scroll的,也就是说除了整个网页可以滚动以外,其他部分是不能局部滚动的。要实现局部滚动,一般都是用iScroll等插件,用javascript来模拟滚动。这技术说起来容易做起来难,我看了无数个类似的东西,没有任何人能做到原生一样的滚动反弹效果。最接近原生效果的是我从某牛逼网站上8下来的代码:https://github.com/longbill/ScrollPane

后来iOS退出了iOS5,其中的浏览器支持了overflow scroll。在配合  -webkit-overflow-scrolling: touch; 的情况下滚动起来是比较理想的。但是唯一有一个弊端就是当局部滚动区域处于滚动边缘的时候(比如处于最上面),此时继续网下滚动手指,滚动操作不会体现在局部滚动区域,而是会作用于整个网页。这个在做web app的时候,是完全无法忍受的。做出来的效果跟把web app界面的头部和底部用position fixed固定是一样的。

所以,即使overflow scroll从iOS5起就被支持,但是用javascript模拟滚动的需求还是十分旺盛。其中很重要的一点就是滚动会传递到外面的网页。另外也很重要的一点就是原生的滚动很难实现类似pull to refresh的操作。

后来我打算将我的精选文章做成web app的形式。尝试了无数的scroll插件,都让人失望。被逼无奈仔细研究了一下原生的overflow scroll。再后来被我找到了一个奇怪的方法,来阻止滚动操作传递到整个网页。

就是。

在手指放在屏幕上的时候,判断里面的滚动部分的 scrollTop 是不是 0 或者 最底下。如果是,那么将 scrollTop 轻轻位移1个像素。就可以了。

另外,我还实现了一个pull to refresh,虽然效果跟原生的不太一样,但是看起来也还不错。

代码我空了会整理写文档然后放到github上。大家可以先看这个 demo。 暂时只支持iOS系统。安卓请忽略。

http://jszen.com/public/demo/ptr/index.html



12009 read 11 comment(s)
#1
annonce vente commerce   2014年09月12号 21:18       回复
什么软件可以制作手机软件
添加新的评论
称呼:*
邮件:*
网站:
内容:

Copyright © Longbill 2008-2017 , Designed by EndTo , Powered by EndCMS