页面使用overflow-scroll在iOS上滑动卡顿的问题

最新推荐文章于 2020-03-04 13:58:45 发布
最新推荐文章于 2020-03-04 13:58:45 发布
阅读量778 收藏 1
点赞数
分类专栏： JavaScript 遇到的问题 文章标签： ios滑动卡顿 overflow

页面使用overflow-scroll在iOS上滑动卡顿的问题

出处：

因在做一个滑动的list列表，为某个div使用了overflow: scroll属性。

结果在手机上测试时，ios手机有明显的滑动卡顿问题，而安卓手机不会出现该现象。

经在网上查阅后，得知：

以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling: touch;

 

 

记录问题,但没有考虑为什么ios下会卡顿的本质？

woowen！
关注
专栏目录
解决iOS 滑动卡顿问题
qq_40797485的博客
12-29 925
webkit-overflow-scrolling: touch; position:absolute; z-index:1;    
解决iPhone中overflow:scroll;滑动速度慢或者卡的问题
蓝色的乌鸦的专栏
08-26 1万+
在移动端html中经常出现横向/纵向滚动的效果,但是在iPhone中滚动速度很慢,感觉不流畅,有种卡卡的感觉,但是在安卓设备上没有这种感觉; 要解决这个问题很简单: 一行代码搞定 -webkit-overflow-scrolling : touch;
解决页面使用overflow: scroll在iOS上滑动卡顿的问题
wnx_52055的博客
01-04 2606
最近的一次开发中，使用到了overflow：scroll 属性来滑动div。 如果你对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。 但是在android系统的手机上则不会出现该问题。大家不妨可以分别使用IOS和Android系统的手机浏览以下链接，滑动文字区域查看该效果(重点是记住iPhone浏览时的效果，方便浏览后文)：http...
解决页面使用overflow: scroll在iOS上滑动卡顿的问题1
08-03
标题中的“解决页面使用overflow: scroll在iOS上滑动卡顿的问题1”指的是在iOS设备上，当HTML元素使用CSS属性`overflow: scroll`时，滚动可能会变得卡顿不顺畅。这个问题通常不会在Android设备上出现，使得开发者...
解决页面使用overflow: scroll，overflow-y:hidden在iOS上滑动卡顿的问题
最新发布
06-08
在 iOS 上，使用 `overflow: scroll` 或 `overflow-y:hidden` 时会出现滑动卡顿的问题，这是因为 iOS 会将...以上两种方法都可以有效解决在 iOS 上使用 `overflow: scroll` 或 `overflow-y:hidden` 时滑动卡顿的问题。
HTML页面在IOS上出现卡顿的解决方案(overflow：scroll)
BlueKitty的博客
12-21 9869
之前在给app做html页面时出现一个奇怪的一个问题 , 相同的一个网页 , 在Android上非常流畅无任何问题 , 而在IOS端浏览时 , 页面滑动起来有明显的卡顿感 . 经网上搜索了解后 , 发现页面中使用了overflow：scroll属性所致(在滑动的div上添加该属性) . 由于本人对前端不甚了解 , 不知道是HTML的问题还是IOS的问题 , 具体谁的锅也无法得知 .     对此
iOS上滑动不流畅问题解决办法
mrhaoxiaojun的博客
11-27 1万+
在  overflow:scroll部分，也就是需要滑动的层处，加css    -webkit-overflow-scrolling: touch;
ios局部滚动的坑及解决方案
weixin_34396103的博客
01-12 1885
起因 最近几天在写一个滚动加载更多数据的插件(Scrollload)，为局部滚动写demo时，遇到了很多局部滚动的坑，在这里分享一下这些坑的解决方案。以下的坑只针对ios。 约定 把产生滚动条的元素称之为视窗 全局滚动：滚动条在body或者body父级元素上。 局部滚动：滚动条在body里的子孙元素上。 局部滚动优势 每个局部滚动拥...
-webkit-overflow-scrolling解决移动端iOS滚动卡顿现象
杨梦飞
03-07 1万+
css3中-webkit-overflow-scrolling使用方法 -webkit-overflow-scrolling: touch; //有回弹效果 -webkit-overflow-scrolling: auto; //滑到哪停到哪 实现滚动回弹效果的页面布局 (实战) html <div class="containBox n...
解决Web移动端Fixed布局的方案（防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、isScroll.js）
热门推荐
我的博客
11-08 1万+
一些细节处理 在细节处理上，其实还有很多要注意的，挑几个实际遇到比较大的问题来说一下： 有时候输入框 focus 以后，会出现软键盘遮挡输入框的情况，这时候可以尝试 input 元素的 scrollIntoView 进行修复。在 iOS 下使用第三方输入法时，输入法在唤起经常会盖住输入框，只有在输入了一条文字后，输入框才会浮出。目前也不知道有什么好的办法能让唤起输入框时正确显示。这暂时
上一篇的后续。。。规避ios全局overscroll的坑
weixin_36094484的博客
07-09 1089
所以就说自己太naive 今天闲地蛋疼着看了下csdn的手机端和一些网站如携程的，发现不少站点都已经在顶部栏用了fixed，但是不会出现overscroll(俗称橡皮筋效果或出界)的情况。 上图就出现了恶心的情况，页面下拉的时候，原本fixed上去的topbar被背景色覆盖了。 但是人家csdn和携程是这样的： solution: 一时好奇研究下，发现原来他们将页面高度限制在客户...
解决移动端特别是ios滑动卡屏 滑动卡顿
kongjiea笔记
02-10 1万+
css属性解决 -webkit-overflow-scrolling:touch; 插件解决 iscroll jroll2
移动端 --- 解决苹果手机滑动卡顿的问题
小草莓的博客
09-30 8921
移动端 --- 解决苹果手机滑动卡顿的问题,在滑动的页面上加上该样式： -webkit-overflow-scrolling : touch;
scroll事件在ios兼容问题
Mangojjx的博客
04-09 2231
最近在维护vue项目中发现一个小坑，该功能是使用scroll事件动态监听屏幕变化发送请求，来完成一个简单排名，但是功能完成后测试分别在安卓、pc端测试均正常，但是苹果手机多次刷新会出现排名混乱的问题，经过分析，终于找到解决方案啦~~~~ ** 问题分析： ** scroll事件在ios上会出现兼容问题，在屏幕滑动时会不断的给后台发送请求，再次刷新，接收到的数据会有出入，导致排名混乱。 要想解决这个...
iOS 深入理解列表卡顿原理和滑动优化方案
weixin_43837354的博客
03-04 2965
转自 ibireme 保持界面流程的介绍 大佬的文章太好太精彩 这篇文章会非常详细的分析 iOS 界面构建中的各种性能问题以及对应的解决思路，同时给出一个开源的微博列表实现，通过实际的代码展示如何构建流畅的交互。 Index 演示项目 屏幕显示图像的原理 卡顿产生的原因和解决方案 CPU 资源消耗原因和解决方案 GPU 资源消耗原因和解决方案 AsyncDisplayKit ASD...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值