为固定高度的网页元素添加 iOS Safari 滚动「惯性效果」的方法
2015-10-08 00:00
573 查看
最近在做一个手机端的 Web 应用,需要建立一个和浏览器窗口一样大的固定高度的 div,并且允许里面包含的内容进行上下滚动。
完成这个事情非常简单:
但是实际在 iPhone 上测试时,发现 Safari(也包括很多 iOS App 内置浏览器使用的 UIWebView)竟然完全禁用掉了著名的「惯性滚动」效果。然而在桌面 Safari 是没问题的。听着似乎没啥,但是实际操作起来会感觉滑动时非常非常不爽。
虽然原因尚不清楚,但解决方法是有的,令人吃惊的是还非常简单:只有一条 CSS 属性即可解决问题。
有的同学添加了这一条属性后遇到了向下滑动后页面变成空白的问题,实际上可以通过一条 CSS 属性把页面加载到内存来解决:
但是如果你通过这个属性把太多内容加入了内存会导致一些性能/卡顿问题。如何权衡就看各位了。
完成这个事情非常简单:
div { height: 100%; overflow-y: auto; }
但是实际在 iPhone 上测试时,发现 Safari(也包括很多 iOS App 内置浏览器使用的 UIWebView)竟然完全禁用掉了著名的「惯性滚动」效果。然而在桌面 Safari 是没问题的。听着似乎没啥,但是实际操作起来会感觉滑动时非常非常不爽。
虽然原因尚不清楚,但解决方法是有的,令人吃惊的是还非常简单:只有一条 CSS 属性即可解决问题。
-webkit-overflow-scrolling: touch;
有的同学添加了这一条属性后遇到了向下滑动后页面变成空白的问题,实际上可以通过一条 CSS 属性把页面加载到内存来解决:
-webkit-transform: translate3d(0,0,0);
但是如果你通过这个属性把太多内容加入了内存会导致一些性能/卡顿问题。如何权衡就看各位了。
相关文章推荐
- iOS-@synthesize和@dynamic的异同
- iOS 9适配技巧(更新版)
- iOS 键盘遮挡输入框的解决方案
- iOS数据持久化之一——plist文件
- iOS数据持久化之二——归档与设计可存储化的数据模型基类
- iOS-XML和JSON两种数据交换格式的比较
- iOS- KVC,KVO,NSNotification总结
- IOS 很多控件的讲解
- IOS 开发笔记——如何用 collection 创建瀑布流
- iOS Xcode多行注释@param—VVDocumenter
- iOS:延时执行的三种方式
- iOS高效编程秘诀——坚持编程习惯
- IOS8与9配置企业证书签名的应用
- iOS 9适配技巧(更新版)
- iOS讲解迷惑之集成百度地图
- iOS项目更新之升级Xcode7 & iOS9
- iOS大典之地图Core Location
- ios抖动动画效果
- 【IOS 开发学习总结-OC-36】★文件 I/O——NSFileHandle&NSURL&NSBundle
- 斯坦福大学公开课 iOS应用开发教程学习笔记(第五课)Protocols,手势识别