-webkit-overflow-scrolling: touch用途

最新推荐文章于 2020-07-01 11:35:51 发布
最新推荐文章于 2020-07-01 11:35:51 发布
阅读量961 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/guo_wenjing/article/details/81103787
本文探讨了在iOS浏览器中展示H5页面时可能出现的滚动不流畅问题，并介绍了解决方案-webkit-overflow-scrolling:touch的应用，该属性能够有效改善滚动体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

h5的页面在ios的浏览器展示时，滚动可能会出现不连贯、卡顿的情形

-webkit-overflow-scrolling: touch的作用是开启滚性滚动和回弹

-webkit-overflow-scrolling:touch; ios橡皮筋效果卡屏，滚动穿透 --已解决
fly_wugui的博客
05-30 2690
-webkit-overflow-scrolling 属性 MDN中概述 入下 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. 值选项 1、auto 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止 2、touch 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的...
深入研究-webkit-overflow-scrolling:touch及ios滚动
weixin_44415368的博客
07-27 191
-webkit-overflow-scrolling:touch是什么？ *MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动...
-webkit-overflow-scrolling:touch
热门推荐
极客神殿
05-25 1万+
之前做移动端项目的时候，同事推荐使用-webkit-overflow-scrolling:touch;属性，当时只是知道在元素内容有滚动条的时候使用这个属性，可以使滚动比较流畅。 然后在MDN上查了一下： -webkit-overflow-scrolling属性是来控制元素在移动设备上是否有回弹的效果。 它有两个属性值： auto:使用普通滚动，当手指在屏幕上离开时，滚动立即停止 touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动
postcss-momentum-scrolling:PostCSS插件添加“动量”样式的滚动行为（-webkit-overflow-scrolling
04-21
插件，用于为iOS上具有溢出（滚动，自动）的元素添加动量样式滚动行为（ -webkit-overflow-scrolling:touch ）。 例子 /* Input example */ . minicart { overflow : scroll; } /* Output example */ . minicart ...
-webkit-overflow-scrolling: touch;
06-28
回答1：</h3><br/>-webkit-overflow-scrolling: touch; 是一个CSS属性，用于在移动设备上实现平滑的滚动效果。它可以应用于具有滚动内容的元素，例如 div 或 iframe。当用户在移动设备上滚动该元素时，它将以流畅的...
overflow-touch:在 iOS Safari 上使用 overflow-y 的 Web 元素的简单通知覆盖，通知他们可以使用两个手指滚动
07-09
这是一种非常简单的方法，可以告诉使用 Safari 的 iPhone/iPod Touch/iPad(?) 用户，他们可以使用两根手指滚动浏览页面元素，否则在完整浏览器中将具有滚动条（overflow-y CSS 属性设置为除了没有之外的其他东西）。...
-webkit-overflow-scrolling: touch
zhanglongdream的博客
01-04 1088
-webkit-overflow-scrolling 主要用来设置在IOS浏览器的容器内滚动是否开启惯性和回弹的。 一般情况下都是设置为touch的 但是这回遇见一个bug 就是使用js改变其滚动的高度 el.scrollTop=100; 在ios环境中，每次手动改变csrollTop后整个容器变成空白，但是手指触摸一下内容就出来了， scrollTop是成功的，只是内容绘制错误
css：-webkit-overflow-scrolling: touch;
aamen1109的博客
11-23 1105
overflow-y:auto; -webkit-overflow-scrolling: touch; 通常在有弹层出现，并且弹层里面是列表，需要上下滑动查看，而且在安卓手机比较卡顿的时候，会用到这个属性。
-webkit-overflow-scrolling
weixin_33709364的博客
08-15 140
-webkit-overflow-scrolling：touch 让移动端页面手机离开后可以继续滚动一段激励，非标准属性。直接加在html样式上就好了。 不能滑动的情况： 在touch事件里加了preventDefault html，body加了height：100% 另外，在ios还是不要用fixed了，自找麻烦。。。 其中一个问题是： 　　滚动条到了最顶部，手指往下拉的时候...
-webkit-overflow-scrolling:touch及ios滚动
haoyanyu_的博客
11-21 530
https://www.cnblogs.com/xiahj/p/8036419.html  
移动端滑动时页面惯性滑动overflow-scrolling: touch
banxia2152的博客
10-25 826
-webkit-overflow-scrolling:auto | touch; auto： 普通滚动，当手指从触摸屏上移开，滚动立即停止touch：滚动回弹效果，当手指从触摸屏上移开，内容会保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。 兼容写法： over-flow: auto; /* winphone8和and...
overflow-scrolling：touch bug
学无的博客
07-01 598
当你给一个元素设置过position:absolute;或者position:relative;后再增加-webkit-overflow-scrolling: touch;属性后，你会发现，滑动几次后可滚动区域会卡主，不能在滑动，这时给元素增加个z-index值就可以了。 -webkit-overflow-scrolling: touch; position:absolute; z-index:1; ...
IOS webkit-overflow-scrolling: touch 踩坑笔记
weixin_30367543的博客
12-17 127
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */ -webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */ overflow:auto 或scroll在ios下无效，需要用-webkit-overflow-scrolling属性然而 “该特性是非标准的，请尽量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值