[转]-webkit-overflow-scrolling:touch的应用
-webkit-overflow-scrolling 用来控制元素在移动设备上是否使用滚动回弹效果.
在移动端上,在你用overflow-y:scorll
属性的时候,你会发现滚动的效果很木,很慢,这时候可以使用-webkit-overflow-scrolling:touch
这个属性,让滚动条产生滚动回弹的效果,就像ios原生的滚动条一样流畅。
兼容安卓和IOS的写法如下
overflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
取值
auto
使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
touch
使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开,会保持一段时间的滚动 */ -webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开,滚动会立即停止 */
浏览器兼容性
移动版 Safari iOS 5.0+
Bug
1.当你给一个元素设置过position:absolute;或者position:relative;后再增加-webkit-overflow-scrolling: touch;属性后,你会发现,滑动几次后可滚动区域会卡主,不能在滑动,这时给元素增加个z-index值就可以了。
-webkit-overflow-scrolling: touch;
position:absolute;
z-index:1;
2.如果给container加了overflow-y:scroll;会出现container内固定的元素错位的情况,解决方法是把设置了position:fixed和position:absolute的元素设置为和container同级即可。
参考文章:https://www.cnblogs.com/xiahj/p/8036419.html
[转]-webkit-overflow-scrolling:touch的应用的更多相关文章
- 在触屏设备中拖动 overflow 元素
在 Android 和 iOS 等触屏设备中,如果网页中某元素设置 overflow: auto 或者 overflow:scroll,那么问题就来了.在 Android 3.0 之前以及 iPhon ...
- 移动端经常出现的兼容问题,谈谈移动端应用或者wap站的一些优化技巧和心得
移动端经常出现的兼容问题,谈谈移动端应用或者wap站的一些优化技巧和心得 1. 安卓浏览器看背景图片,有些设备会模糊. 因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,安卓手机 ...
- H5、CSS3属性的支持性以及flex
一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...
- ScrollFix.js:一个 iOS5 溢出滚动的(有限)修复方案
Update: Unfortunately this does not 100% solve the problem, the script falls down when handling touc ...
- 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼
2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼 转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升:IE10 随着 Windows 8 在 ...
- bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法
bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...
- 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼【转】
摘要: 这篇文章给大家带来<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>,让我们一起来看看2013年的浏览器现状.浏览器厂商之间的竞争促使各大浏览器对 HTML5 和 CSS3 ...
- ie6,ie7,ie8 css bug兼容解决方法
IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...
- ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
- 移动web之用CSS样式写如苹果手机的开关键
话说这个问题纠结了近一个小时,为什么呢?看看就知道了. 在公司的商旅Web移动版本项目上有这么一个交互,需要模仿iphone自带的开关,好吧,肯定没什么问题. Tip:请使用Chrome查看以下案例 ...
随机推荐
- eclipse-连接TFS错误 <the server to respond with a valid http response>解决方法
解决办法 如果普通凭证有多个,则将普通凭证给删除.
- namespace及use的用法
namespace(以下简称ns).在定义了一个ns之后,下面所申明的class.interface.const(不包含variable)都是在申明的ns这个“域”里面的.当引用一个申明了ns的包含文 ...
- Docker - 避免启动container后运行shell脚本执行完成后docker退出container
问题 最近在使用 Dockerfile 启动容器,发现使用Dockerfile调用容器里面的shell,当shell执行完成以后,docker会退出容器. 分析 Docker 在执行shell的时候, ...
- selenium - 驱动 chromedriver 初始化问题总结
ChromeDriver切换浏览器语言 ChromeOptions options = new ChromeOptions(); options.addArguments("--lang=& ...
- linux 动态静态库
库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. 1 静态库和动态库的区别1.1. 静态函数库 (1)静态函数库的名字一般是lib[name].a( ...
- <%@ page import=""%>的用法
转自:https://blog.csdn.net/huihui870311/article/details/455642111 <jsp:directive.page import=" ...
- sftp put权限不够
报错如下: sftp> put play.zip ./ Uploading play.zip to /opt/library/./play.zip remote open("/opt/ ...
- Tornado之自定义session
面向对象基础 面向对象中通过索引的方式访问对象,需要内部实现 __getitem__ .__delitem__.__setitem__方法 #!/usr/bin/env python # -*- ...
- 设置html页面不被浏览器缓存
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" ...
- Solr查询过程源码分析
原文出自:http://blog.csdn.net/flyingpig4/article/details/6305488 <pre name="code" class=&qu ...