css: overflow:scroll 在ios 上出现滑动不流畅的问题

最新推荐文章于 2024-08-25 04:02:38 发布
最新推荐文章于 2024-08-25 04:02:38 发布
阅读量553 收藏
点赞数
分类专栏： csss布局 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43278947/article/details/104834208
版权

css: overflow:scroll 在ios 上出现滑动不流畅的问题，在滑动样式内加入 -webkit-overflow-scrolling: touch; 即可

IF YOU～
关注
专栏目录
解决页面使用overflow: scroll在iOS上滑动卡顿的问题1
08-03
标题中的“解决页面使用overflow: scroll在iOS上滑动卡顿的问题1”指的是在iOS设备上，当HTML元素使用CSS属性`overflow: scroll`时，滚动可能会变得卡顿不顺畅。这个问题通常不会在Android设备上出现，使得开发者...
【兼容性】ios上设置overflow: scroll不滚动bug
热门推荐
生如夏花 炫至茶靡
10-13 2万+
背景 目前遇到这么一个问题：我有一个可以向下展开的下来菜单，菜单初始高度大于300px左右，没有超过手机屏幕高度，当展开的时候如果超过手机屏幕高度时让父元素出现滚动条滚动，就是说内容的高度是动态的。 描述 此前我通过js动态获取屏幕高度，并设置为父元素的max-height。然后设置父元素overflow-y: scroll; 起初，我大概的代码布局如下： <div className...
ios滑动流畅
weixin_42101753的博客
09-29 130
只需添加一行css样式：如下 -webkit-overflow-scrolling: touch <div class="dy-body" v-if="showContent" style="-webkit-overflow-scrolling: touch;">
ios看不到滚动条
最新发布
weixin_29206669的博客
08-25 68
我整理的一些关于【iOS,开发者,应用程序】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/bLN8S1iOS应用程序中如何处理滚动条问题 在iOS应用程序中，滚动条是用户与内容交互的重要视觉元素，它能够帮助用户了解当前的滚动位置。然而，很多开发者在设计界面时发现，iOS在某...
css的overflow:scroll与ios
zhuhaomingoo的博客
10-30 1321
周末了，现在把上周所遇到的问题以及学到的一些新知识做一总结。在上次的一个混合开发中，我的H5页面嵌入到原生app,由于是静态页，跳转都是用Angular在原生里做的处理，数据过长在于是就是用了: css的“overflow-y:scroll;” 属性。在安卓系统中看页面无卡顿，滚动良好。可在ios系统中滚动卡顿甚至划不动的现象，原因是overflow：scroll；与ios自带的滚动相冲突取了
ios系统的css兼容问题处理和iOS上网页滑动不流畅问题
weixin_30782293的博客
01-22 667
1.H5网页touch滑动的时候在苹果手机上出现不流畅的问题 -webkit-overflow-scrolling 用来控制元素在移动设备上是否使用滚动回弹效果. 解决办法：给所有网页添加如下样式 body { overflow:auto; /* 用于 android4+，或其他设备 */ -webkit-overflow-scrolling:touch; ...
探究ios -webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug
那谁家的博客
08-28 7687
探究ios -webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug 最常见的例子就是， 在safari上，使用了-webkit-overflow-scrolling:touch之后，页面在上下边界处偶尔会卡住不动。 在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动的bug。 通过动态添加内容撑开容器，结果根本不能滑动的bug。 在网...
css解决ios上滑动卡顿
掘墓者的博客
07-23 1524
网上看了很多ios样式卡顿的解决方法， 最多的就是-webkit-overflow-scrolling: touch; 但是 如果加上这个属性会把固定的元素 一起滑动 解决方法： body{ overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; } 再将 需要滑动的元素加上下面几个属性 ...
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
iOS 中 position:fixed 吸底时的滑动出现抖动是前端开发中常见的问题之一。这个问题的出现主要是由于 native 和 h5 两个原因引起的抖动。native 的抖动是由于 iOS 中的 viewport跟着动引起的，而 h5 的抖动是由于 ...
在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
由于在遮罩层的根元素上绑定了`@touchmove.prevent`和`@mousewheel.prevent`，任何尝试在该元素上进行的滑动或滚动操作都将被阻止，从而防止底层页面的滚动。 另外，对于传统页面，我们可能会选择在`body`元素上...
微信小程序中scroll-view中不设定高度实现自动滚动
09-17
2. **兼容性问题**：由于微信小程序的版本更新较快，部分旧版本可能存在兼容性问题，请确保在多个版本上进行充分测试。 3. **调试技巧**：利用微信开发者工具中的调试功能，可以帮助快速定位样式和布局问题，提高...
弹框后禁止遮罩层后面页面滚动（兼容ios和android）.zip
08-20
这个问题在iOS和Android平台上表现不同，需要特定的解决方案来确保一致的用户体验。 在iOS设备上，由于其独特的UIWebView或WKWebView的滚动行为，弹出层经常会出现遮罩层无法阻止底层页面滚动的情况。而在Android...
两句css 搞定页面滚动时的卡顿问题？
tager168的博客
10-23 3430
前言 对于网页的卡顿性能优化，我们首先想到的肯定是从JavaScript开始。但这个锅js表示不背????，但不是js的原因又会是什么原因了？文章内容不多，只要你能仔细看完，相信一定能对你有所帮助。 在实际项目中React、Vue、Angular三大框架都有使用过，其在开发效率上是毋庸置疑的，但在某些场景上其性能确是差强人意的。如果大家有遇到此类场景，欢迎在下方留言讨论。 下面我们一起来了解一下实际项目中遇到的此类性能瓶颈是如何处理的! 背景 项目基于VUE，由于业务要求需要长列表渲染(不能做动态加载和虚拟
H5页面在ios手机滑动卡顿问题
TeroZhang的博客
11-23 3026
在我们开发中，H5页面多多少少会在外部打开，比如微信，钉钉，那么就会存在一些意想不到的bug！此次主要针对移动端H5页面在iOS端产生的 橡皮回弹（橡皮筋效果）造成滑动卡顿问题做一下相关记录，希望对遇到类似问题的同学有所帮助。
css中overflow滑动效果在IOS中不流畅
系咩的个人收藏博客
10-12 1464
最近做一个项目的分类页,发现滚动在安卓机子上非常流畅,但是在IOS设备上异常的缓慢,就跟触摸屏不灵敏一样 后面加上这个标签就问题解决了,如丝般顺滑! -webkit-overflow-scrolling: touch; 百度说这句语句是启动了硬件加速的特性，所以滑动起来会非常流畅；不过会影响性能； 但是并没有太大的影响.完美解决了!
纯css隐藏移动端滚动条解决方案（ios上流畅滑动）
weixin_30649859的博客
09-22 549
html代码展示（直接复制代码保存至本地文件运行即可）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, ma...
设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿
sinat_33337475的博客
09-28 1万+
设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿，所以在这个div上加一个css: -webkit-overflow-scrolling : touch; 在苹果手机上使用-webkit-overflow-scrolling:touch会导致使用固定定位的元素，随着页面一起滚动，只有滚动停止时才会恢复原位。如果不用这个属性的话，使用overflow-y
移动端 --- 解决苹果手机滑动卡顿的问题
小草莓的博客
09-30 8942
移动端 --- 解决苹果手机滑动卡顿的问题,在滑动的页面上加上该样式： -webkit-overflow-scrolling : touch;
苹果手机 滚动不流畅问题简单处理
web_q的博客
02-03 7175
-webkit-overflow-scrolling : touch;---加个这个就行 例:.left,.tcleft { position: fixed; font-size: .5rem; width: 21.3%; background: #f5f5f5; overflow-y: auto; z-index: 999; -webkit-overf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值