ScrollFix.js:一个 iOS5 溢出滚动的(有限)修复方案
Update: Unfortunately this does not 100% solve the problem, the script falls down when handling touch interactions when a scrolling section is bouncing/rubber banding. I don’t think this issue can be worked around (but would love to be proved wrong!). As such, I don’t advise the use of overflow: scroll
for web apps until Apple provide a fix, I’d recommend continuing to use iScroll or Scrollability in the meantime!
更新:遗憾的是,这个脚本不能百分之百地解决问题,如果滚动区块正处在橡皮筋效果的回弹过程中,此时的触摸交互无法修正(译注:有机会再详述)。我认为这个问题无法变通解决(但我希望你能证明我错了)。因此,我不建议在 web app 中使用 overflow: scroll
,除非将来 Apple 提供修复。我目前会推荐继续使用 iScroll 或 Scrollability。
One of the things I was most looking forward to in iOS5 was the added support for overflow: scroll
and the associated -webkit-overflow-scrolling: touch
.
iOS5 最令人期待的一点,就是增加对 overflow: scroll
以及与之相关的 -webkit-overflow-scrolling: touch
的支持。
After a bit of use, there is at least one issue with the implementation that makes it difficult to use for full screen web apps. Fortunately there is a work around.
在稍加试用之后,我发现这个特性的实现方式至少存在一个问题——很难用于全屏的 web app。幸运的是,我找到了一个变通方法。
The newly supported overflow:scroll
is a great addition to Mobile Safari’s arsenal and works well except under the following conditions:
这个新特性令 Mobile Safari 如虎添翼,十分好用,但以下情况除外:
- The scroll area is at the top and the user tries to scroll up
- The scroll area is at the bottom and the user tries to scroll down.
- 滚动区域已经滚到顶部时,用户试图继续向上滚动。
- 滚动区域已经滚到底部时,用户试图继续向下滚动。
In a native app, you’d expect the content to rubber band but in Safari the whole page is scrolled instead.
在原生应用中,你会期望只有内容区呈现橡皮筋效果,但在浏览器中的效果是整个页面都被拖动了。
Enter ScrollFix.js, a small script that works around this problem.
试试 ScrollFix.js 吧,一小段脚本就可以变通解决这个问题。
ScrollFix works around this by manually offsetting the scrollTop
value to one away from the limit at either extreme, which causes the browser to use rubber banding rather than passing the event up the DOM tree.
ScrollFix 的原理是这样的,在触摸开始时,如果发现滚动区域已经处于极限状态时,就手工设置scrollTop
的值,将滚动内容向边缘方向偏移 1px(这实际上改变了滚动区域的极限状态),从而诱使浏览器对滚动区块使用橡皮筋效果,而不会把触摸事件向上传播到 DOM 树(引起整页滚动)。
To better demonstrate the problem (and solution) here are a couple of videos:
为了更好地演示这个问题(和解决方案),这里放出两个视频(YouTube 需翻小墙):
- iOS5 overflow scrolling without ScrollFix.js
- iOS5 overflow scrolling with ScrollFix.js
- 未使用 ScrollFix.js 的 iOS5 溢出滚动效果
- 已使用 ScrollFix.js 的 iOS5 溢出滚动效果
(译注:同时附上后者的 在线演示,请使用 iOS 设备访问。)
ScrollFix is a work in progress (there are still bugs!) and can be downloaded for free from GitHub. Please contribute code fixes or open tickets for discussion.
ScrollFix 仍然在开发中,还有一些 bug,但你可以在 GitHub 免费下载(译注:在原文发表后不久,这个项目就基本成熟了)。你可以贡献代码,也可以提交 issue 展开讨论。
译者后记
在 iOS5 发布之前,构建 web app 的一个老大难问题就是局部滚动。实现类似原生应用的“页头固定 + 内容滚动”这一经典布局,正是 web app 的一大痛点,这也催生了 iScroll 这类项目。
幸运的是,iOS5 对 overflow: scroll
的支持为 web app 的 UI 进化提供了新的契机。本文作者的探索进一步将梦想变为现实。
ScrollFix.js 用非常巧妙思路的解决了溢出滚动区域的触摸交互问题,更有价值的是,它使用的是浏览器的原生滚动特性,而不是像 iScroll 这样的模拟滚动实现。原生滚动带来的好处是更少的性能消耗、更灵敏的触控体验,同时可以与表单元素的交互行为合睦相处。
本文作者是个完美主义者,他在文章开头中提到的“小问题”实际上并没有那么严重(在 iOS 5.1 中已经很难重现,而且 iOS6 已经修复)。因此,我的建议是,如果你的项目只需要支持较高版本的 iOS 5+ 和 Android 4+,就果断放弃 iScroll,拥抱轻巧顺滑的原生滚动吧!
ScrollFix.js:一个 iOS5 溢出滚动的(有限)修复方案的更多相关文章
- scrollfix.js插件:滚动固定在某个位置
插件文件在/文件 scrollfix.js 用法: var fix = $(".fix"), fixtop = $(".fix-top"), fixStartT ...
- 今天代码中接触到了一个新的东西。js的上下自动滚动,无缝对接。
js的上下自动滚动,无缝对接.为什么会用到这个东西呢?因为我在做公司的官网项目的修改的时候.有一个产品介绍的页面,会有很多的产品出现在,中间部分的列表里.但是又不能够使用分页.所以我就在想如果,列表数 ...
- js 实现文字列表滚动效果
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...
- 【JS】341- 移动端滚动穿透的6种解决方案
前言 相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和bod ...
- Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
- js点击左右滚动+默认自动滚动类
js点击左右滚动+默认自动滚动类 点击下载
- js 实现单行文本滚动效果
js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...
- js标题文字向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
随机推荐
- [Android Pro] 超能RecyclerView组件使用
RecyclerView最强大的功能在于秒变功能,只需要改动很少的代码就可以实现ListView,GridView及水平ListViw的切换功能 public class MainActivity e ...
- 自定义Notification
private static void updateProgressNotification(Context cxt, int appsCount, int percent, String appNa ...
- SQL 代码创建表格以及CRUD
create table <表名>( <列名> <数据类型及长度> [not null], <列名> <数据类型及长度>, ... < ...
- sdut 2413:n a^o7 !(第三届山东省省赛原题,水题,字符串处理)
n a^o7 ! Time Limit: 1000MS Memory limit: 65536K 题目描述 All brave and intelligent fighters, next you w ...
- VS2010编写动态链接库DLL及单元测试用例,调用DLL测试正确性
转自:http://blog.csdn.net/testcs_dn/article/details/27237509 本文将创建一个简单的动态链接库,并编写一个控制台应用程序使用该动态链接库,该动态链 ...
- Striiv Myland 攻略
推荐一款IOS平台上的运动APP:Striiv.可以记录平时的步数,路程,卡路里,运动时间.如果购买相应的硬件,还可以记录每天爬了多少台阶(这是专门为爬楼者用的么...). 其中比较吸引我的是里面有个 ...
- 【codevs1690】开关灯 线段树 区间修改+区间求和(标记)
[codevs1690]开关灯 2014年2月15日4930 题目描述 Description YYX家门前的街上有N(2<=N<=100000)盏路灯,在晚上六点之前,这些路灯全是关着的 ...
- MATLAB中 feval 函数的用法
feval就是把已知的数据或符号带入到一个定义好的函数句柄中,你看看下面的例子 syms tf=@(x,y) x^2+y^2k1=feval(f,1,t)k2=f(1,t)k3=feval(f,1,1 ...
- WinForm下窗体标题栏上有“帮助”按钮
将FormBorderStyle设置为Sizable. 最大化和最小化设置为false helpbutton 设置为true
- 在Linux下搭建SVN服务器
svn不仅仅可以用于程序开发,还可以做很多事情,例如备份文档. CentOS下:安装 这样同一台服务器便可以运行多个svnserver了 检查端口 注:如果修改了svn配置,需要重启svn服务 -j ...