css中overflow滑动效果在IOS中不流畅

最新推荐文章于 2023-12-26 09:32:59 发布
最新推荐文章于 2023-12-26 09:32:59 发布
阅读量1.4k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39650528/article/details/78214151
版权


最近做一个项目的分类页,发现滚动在安卓机子上非常流畅,但是在IOS设备上异常的缓慢,就跟触摸屏不灵敏一样

后面加上这个标签就问题解决了,如丝般顺滑!

-webkit-overflow-scrolling: touch;

百度说这句语句是启动了硬件加速的特性，所以滑动起来会非常流畅；不过会影响性能；

但是并没有太大的影响.完美解决了!


系咩
关注
css 苹果滑动,使用CSS的类似Apple的滚动条
weixin_36251916的博客
08-04 794
小编典典苹果正在使用以下CSS怪物：::-webkit-scrollbar {width: 15px;height: 15px;}::-webkit-scrollbar-corner {background-image: url(http://i.stack.imgur.com/FguQn.png?corner.png);background-repeat: no-repeat;}::-webki...
html页面滑动不流畅,解决页面使用overflow:scroll在移动端iOS系统上滑动出现卡顿的问题...
weixin_35975406的博客
06-03 1560
对某个div或模块使用了overflow:scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。通过一个早上的爬虫搜索和与前端开发高手的技术探讨得知以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling:touch;据说是因为这行代码启用了硬件加速特性，所以滑动很流畅。但是这个属性也会相对耗费更多内存。在...
css 中加入 overflow 在 IOS 中滑动 发涩 【解决】
qq_37449852的博客
11-08 213
加一段代码 -webkit-overflow-scrolling: touch 就OK了
css ios中使用overflow ：auto 时 滑动时随着手指滑动问题
qyx189573的博客
07-04 451
添加css
解决页面使用overflow: scroll在iOS上滑动卡顿的问题
wnx_52055的博客
01-04 2627
最近的一次开发中，使用到了overflow：scroll 属性来滑动div。 如果你对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。 但是在android系统的手机上则不会出现该问题。大家不妨可以分别使用IOS和Android系统的手机浏览以下链接，滑动文字区域查看该效果(重点是记住iPhone浏览时的效果，方便浏览后文)：http...
overflow属性及其在ios下卡顿问题解决
weixin_30725467的博客
01-04 116
overflow属性：http://www.w3school.com.cn/cssref/pr_pos_overflow.asp overflow:scroll/auto;在手机页面滑动不流畅问题： 在overflow:scroll;代码部分，增加： -webkit-overflow-scrolling: touch; 原理： 　　1.据说是因为这行代码启用了硬件加速特性，所以...
在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
在Vue 2.0中，可以通过设置CSS样式和利用Vue的`ref`属性来实现这一效果。以下是一个例子： ```html <!--item列表区域--> (item, index) in items"> 禁止屏幕滚动"> <span class="inviter-goods">{{item....
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案
08-31
该属性是苹果特有的，用于在iOS设备上实现更流畅的触摸滚动效果，但它也可能引发一些意想不到的副作用，比如空白页面的出现。 首先，我们来深入理解 `-webkit-overflow-scrolling` 的工作原理。这个属性允许我们在...
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
10-17
这说明在开发和测试过程中，不仅要关注PC端的显示和功能，还要额外关注在iOS和Android这类移动设备上的表现，因为它们的浏览器和操作系统存在差异，很可能导致在不同环境下的性能和交互体验问题。 通过上述解决方案...
H5页面IOS系统的滚动条怎么去掉
LILEILEILOVE的博客
07-15 2540
设置css样式，要加这两句 ::-webkit-scrollbar { display:none； width:0; } 加上下面这两句可以让滚动更加流畅 -webkit-overflow-scrolling: touch; overflow-scrolling: touch;
纯css隐藏移动端滚动条解决方案（ios上流畅滑动）
bailoushi1658的博客
08-21 272
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, ...
兼容IOS android 页面滑动的CSS设置
yeshen.org
04-22 1866
<style type="text/css"> #scroller { box-sizing: border-box; -webkit-overflow-scrolling: touch; position: absolute; width: 100%; top: 0px; bottom: 0px; right: 0px;...
解决IOS 原生项目加载html上下可滑动
dt1991524的博客
11-21 1475
初入前端，在IOS上加载一个html项目，发现前端页面总是上下滑动，导航和下面的tabbar 在上拉和滑动时总是跟着滑动，如图： 不明原因，以为是前端页面的问题，一直改，可是无论如何都不行，决定换个思路，在原生项目上做更改，因为是用UIWebView加载的，想着是否可以用它来控制滑动！ 一行代码完美解决！   self.resultwebV.scrollView.bounces = NO...
记录解决动画在IOS上卡顿的问题
最新发布
qq_41910886的博客
12-26 654
使用CSS + JS实现滑动动画，在IOS上一顿一顿的，通过创建animation对象解决问题
ios h5页面滚动卡顿的解决办法
12-05 3398
开发微信公众号网页的时候发觉iOS系统滑动页面的时候会特别卡顿，但是安卓就比较流畅。 网上搜索发觉有这个css属性可以设置iOS滑动不卡顿 -webkit-overflow-scrolling: touch 不过看文档也提示说尽量少用这个特性，但是实在无法解决的情况下还是用这个了。...
css的overflow:scroll与ios
zhuhaomingoo的博客
10-30 1318
周末了，现在把上周所遇到的问题以及学到的一些新知识做一总结。在上次的一个混合开发中，我的H5页面嵌入到原生app,由于是静态页，跳转都是用Angular在原生里做的处理，数据过长在于是就是用了: css的“overflow-y:scroll;” 属性。在安卓系统中看页面无卡顿，滚动良好。可在ios系统中滚动卡顿甚至划不动的现象，原因是overflow：scroll；与ios自带的滚动相冲突取了
css -> overflow:auto 中的scroll在 苹果手机safari 滚动不流畅问题
mft8899的博客
08-01 3102
    给CSS 加上如下样式 -webkit-overflow-scrolling: touch; overflow-x: scroll;    
iOS 移动端overflow:auto 滚动不平滑及bug处理
张营的技术博客
07-23 4105
在苹果手机上使用overflow:auto 默认滚动不平滑。 解决方案是使用-webkit-overflow-scrolling:touch bug： 会导致使用固定定位的元素，随着页面一起滚动。 fix bug: 把固定元素不放在可滚动区域，在外层在加一层。 详细有关ios滚动惯性的问题移步：ios与惯性滚动...
HTML页面在IOS上出现卡顿的解决方案(overflow：scroll)
BlueKitty的博客
12-21 9879
之前在给app做html页面时出现一个奇怪的一个问题 , 相同的一个网页 , 在Android上非常流畅无任何问题 , 而在IOS端浏览时 , 页面滑动起来有明显的卡顿感 . 经网上搜索了解后 , 发现页面中使用了overflow：scroll属性所致(在滑动的div上添加该属性) . 由于本人对前端不甚了解 , 不知道是HTML的问题还是IOS的问题 , 具体谁的锅也无法得知 .     对此
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值