为固定高度的网页元素添加 iOS Safari 滚动「惯性效果」的方法
2015-10-08 19:25
363 查看
原文链接:https://www.geek-share.com/detail/2655233680.html
最近在做一个手机端的 Web 应用,需要建立一个和浏览器窗口一样大的固定高度的 div,并且允许里面包含的内容进行上下滚动。
完成这个事情非常简单:
div { height: 100%; overflow-y: auto; }
但是实际在 iPhone 上测试时,发现 Safari(也包括很多 iOS App 内置浏览器使用的 UIWebView)竟然完全禁用掉了著名的「惯性滚动」效果。然而在桌面 Safari 是没问题的。听着似乎没啥,但是实际操作起来会感觉滑动时非常非常不爽。
虽然原因尚不清楚,但解决方法是有的,令人吃惊的是还非常简单:只有一条 CSS 属性即可解决问题。
-webkit-overflow-scrolling: touch;
有的同学添加了这一条属性后遇到了向下滑动后页面变成空白的问题,实际上可以通过一条 CSS 属性把页面加载到内存来解决:
-webkit-transform: translate3d(0,0,0);
但是如果你通过这个属性把太多内容加入了内存会导致一些性能/卡顿问题。如何权衡就看各位了。
转载于:https://www.geek-share.com/detail/2655233680.html
相关文章推荐
- 为固定高度的网页元素添加 iOS Safari 滚动「惯性效果」的方法
- iOS Safari 将网页「添加到主屏幕」的图标路径设置
- js固定DIV高度,超出部分自动添加滚动条的简单方法
- js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
- 无固定高度的div在父元素中垂直居中的方法
- iOS UIWebView 获取内容实际高度,关闭滚动效果
- 滚动页面时固定元素高度
- vue监听滚动事件实现顶部元素header渐隐渐显效果,滚到一定距离固定在顶部
- IOS设备上网页中的页面滚动效果模拟
- 网页图片变形解决方法-固定宽度高度按比例自动缩小CSS
- iOS UIWebView 获取内容实际高度,关闭滚动效果
- ios UIImageView添加图片动画效果,添加了手势之后,依然没有反应的解决方法
- jQuery视差滚动效果网页实现方法经验总结
- IOS设备上网页中的页面滚动效果模拟
- ionic3 踩坑、滚动页面时 (ios) safari橡皮筋效果
- 详解iOS App中UIPickerView滚动选择栏的添加方法
- 元素随屏幕滚动到顶部固定js效果
- jQuery设置指定网页元素宽度和高度的方法
- js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
- iOS UIWebView 获取内容实际高度,关闭滚动效果