【web前端】22.解决-webkit-overflow-scrolling:touch的bug

-webkit-overflow-scrolling:touch用来控制元素在移动设备上是否使用滚动回弹的效果，兼容Android和Ios的写法如下：

overflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */

取值

auto：使用普通滚动，当手指从触摸屏上移开，滚动会立即停止。

touch：使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的效果和持续的时间和滚动手势的强烈程度成正比，同时也会创建一个新的堆栈上下文。

举个例子

-webkit-overflow-scrolling: touch // 当手指从触摸屏上移开，会保持一段时间的滚动
-webkit-overflow-scrolling: auto // 当手指从触摸屏上移开，滚动会立即停止

浏览器兼容性

移动版Safari ios5.0+

Bug

当一个元素设置过position：absolute；或者position：reative；后再加-webkit-overflow-scrolling：touch；属性后，你会发现，滑动几次后可滚动区域会卡住，不能再滑动，这时给元素添加一个z-index值就可以了。

-webkit-overflow-scrolling: touch;
position:absolute;
z-index:1;

【web前端】22.解决-webkit-overflow-scrolling:touch的bug相关推荐

[Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...
html中怎么消除排序的前缀,北京web前端培训-解决css3前缀问题的插件-Autoprefixer...
我们在前端开发中,经常会遇到一些属性需要添加前缀属性,比如-webkit-transform: auto; 或者displsy:-webkit-flex; 这些需要添加前缀的属性多且难记,很容易就会在 ...
WEB前端开发解决IE6、IE7、IE8样式不兼容问题
如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下: CODE: <meta ...
服务器不响应Ajax,web前端：解决在IE11浏览器下,JQuery的AJAX方法不响应问题
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件.jQuery兼容各种主流浏览器 ...
Web前端笔记-解决Vue编写的输入框（input、textarea等）使用JS设置value时提交表单无效的问题
主要的原因是vue相当于套了一层,界面上的输入框会关联model,提交表单的时候,他是直接提交model的值,而不是传统的输入框里面的值. 所以用这种: let textAreaItem = docu ...
Web前端笔记-解决[Intervention] Unable to preventDefault inside passive event listener due to target being
我这里是使用NiceScroll造成的. 报错如下: 解决这个问题的方法有2种: Ⅰ:修改源码找到jquerynicesroll.js 报错的地方:直接让其return false Ⅱ:修改自己的代码 ...
Web前端笔记-解决NicSroll使用后页面跳动（每次刷新或进入跳动一下然后正常）问题
我的是这样的页面头部和尾部不动,就中间动.但每次刷新时会先出现这个. 然后页面跳动下,就正常了,很奇怪的体验,对应的代码如下: <head>.........<script> ...
html怎么发送表情,前端怎么解决emoji表情无法发送的BUG
之前在做移动端开发时候,有一个发表评论的功能需要实现,虽然这个功能比较简单能做出来,但是我在测试的时候说手机自带的emoji表情发送失败的BUG总是出现,所以今天给大家带来出现这种BUG的解决方法 ...
inline-block间隙原因和解决方法（web前端问题）
inline-block间隙原因和解决方法(web前端问题) 参考文章: (1)inline-block间隙原因和解决方法(web前端问题) (2)https://www.cnblogs.com/ge ...
Python+selenium 自动化高级应用篇：借助pyautogui实现web前端带轨迹拖拽功能，解决ActionChains拖拽失效问题
有一些 web 前端的交互,必须有鼠标轨迹才能成功的实现拖拽功能. 而 selenium 自带的 ActionChains 方法,是一瞬间从 A 点到 B 点的. 解决思路: 利用元素返回的相对浏览器 ...

【web前端】22.解决-webkit-overflow-scrolling:touch的bug

【web前端】22.解决-webkit-overflow-scrolling:touch的bug相关推荐

最新文章

热门文章