-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的应用的更多相关文章

  1. 在触屏设备中拖动 overflow 元素

    在 Android 和 iOS 等触屏设备中,如果网页中某元素设置 overflow: auto 或者 overflow:scroll,那么问题就来了.在 Android 3.0 之前以及 iPhon ...

  2. 移动端经常出现的兼容问题,谈谈移动端应用或者wap站的一些优化技巧和心得

    移动端经常出现的兼容问题,谈谈移动端应用或者wap站的一些优化技巧和心得 1.        安卓浏览器看背景图片,有些设备会模糊. 因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,安卓手机 ...

  3. H5、CSS3属性的支持性以及flex

    一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...

  4. ScrollFix.js:一个 iOS5 溢出滚动的(有限)修复方案

    Update: Unfortunately this does not 100% solve the problem, the script falls down when handling touc ...

  5. 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼

    2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼   转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升:IE10 随着 Windows 8 在 ...

  6. bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法

    bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...

  7. 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼【转】

    摘要: 这篇文章给大家带来<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>,让我们一起来看看2013年的浏览器现状.浏览器厂商之间的竞争促使各大浏览器对 HTML5 和 CSS3 ...

  8. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  9. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  10. 移动web之用CSS样式写如苹果手机的开关键

    话说这个问题纠结了近一个小时,为什么呢?看看就知道了. 在公司的商旅Web移动版本项目上有这么一个交互,需要模仿iphone自带的开关,好吧,肯定没什么问题. Tip:请使用Chrome查看以下案例 ...

随机推荐

  1. eclipse-连接TFS错误 <the server to respond with a valid http response>解决方法

    解决办法 如果普通凭证有多个,则将普通凭证给删除.

  2. namespace及use的用法

    namespace(以下简称ns).在定义了一个ns之后,下面所申明的class.interface.const(不包含variable)都是在申明的ns这个“域”里面的.当引用一个申明了ns的包含文 ...

  3. Docker - 避免启动container后运行shell脚本执行完成后docker退出container

    问题 最近在使用 Dockerfile 启动容器,发现使用Dockerfile调用容器里面的shell,当shell执行完成以后,docker会退出容器. 分析 Docker 在执行shell的时候, ...

  4. selenium - 驱动 chromedriver 初始化问题总结

    ChromeDriver切换浏览器语言 ChromeOptions options = new ChromeOptions(); options.addArguments("--lang=& ...

  5. linux 动态静态库

    库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种.  1  静态库和动态库的区别1.1. 静态函数库    (1)静态函数库的名字一般是lib[name].a( ...

  6. <%@ page import=""%>的用法

    转自:https://blog.csdn.net/huihui870311/article/details/455642111 <jsp:directive.page import=" ...

  7. sftp put权限不够

    报错如下: sftp> put play.zip ./ Uploading play.zip to /opt/library/./play.zip remote open("/opt/ ...

  8. Tornado之自定义session

      面向对象基础 面向对象中通过索引的方式访问对象,需要内部实现 __getitem__ .__delitem__.__setitem__方法 #!/usr/bin/env python # -*- ...

  9. 设置html页面不被浏览器缓存

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" ...

  10. Solr查询过程源码分析

    原文出自:http://blog.csdn.net/flyingpig4/article/details/6305488 <pre name="code" class=&qu ...