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隐藏 前端代码: <! ...
随机推荐
- July 25th, Week 31st Monday, 2016
We will not go quietly into the night. 今夜,我们将奋战到底. We will be the champion. We will not stop fightin ...
- static_cast, dynamic_cast, const_cast
http://www.cnblogs.com/chio/archive/2007/07/18/822389.html 首先回顾一下C++类型转换: C++类型转换分为:隐式类型转换和显式类型转换 第1 ...
- NVelocity模板引擎的使用
第一种使用方法直接赋值: VelocityEngine vltEngine = new VelocityEngine(); vltEngine.SetProperty(RuntimeConstants ...
- Mac下Erlang环境安装
下载源码(地址:http://www.erlang.org/download.html), 传统的三步安装: ./configure ./make sudo make install 备注:在编译系 ...
- Storm工程创建
1.创建maven项目: pom.xml: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&quo ...
- PHP+socket+SMTP、POP3协议发送、接收邮件
.实现SMTP协议的类dsmtp.cls.php:<?php , $webname=).); } } .实现POP3协议的类dpop3.cls.php: <? ...
- 小甲鱼PE详解之输入表(导入表)详解(PE详解07)
捷径并不是把弯路改直了,而是帮你把岔道堵上! 走得弯路跟成长的速度是成正比的!不要害怕走上弯路,弯路会让你懂得更多,最终还是会在终点交汇! 岔路会将你引入万劫不复的深渊,并越走越深…… 在开始讲解输入 ...
- matlab参数查询
nargout nargout的作用是在matlab中定义一个函数时, 在函数体内部, nargout指出了输出参数的个数(nargin指出了输入参数的个数). 特别是在利用了可变参数列表的函数中, ...
- python 把函数作为参数 ---高阶函数
把函数作为参数 在2.1小节中,我们讲了高阶函数的概念,并编写了一个简单的高阶函数: def add(x, y, f): return f(x) + f(y) 如果传入abs作为参数f的值: add( ...
- Date类型和Long类型的相互转换
Date类型和Long类型的相互转换: import java.text.SimpleDateFormat; import java.util.Date; public class T { publi ...