HTML手机单页面滑动时不流畅、略显卡顿怎么解决

在安卓上挺流畅的,在iphone上滑动时就略显卡顿,求解决办法,在线等....

0

2个回答

减少元素数量和元素嵌套复杂度,尽可能不使用单页面开发方式

1

增加样式:-webkit-overflow-scrolling:touch;

1
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
解决html5手机端滑动卡顿的现象
 * {     -webkit-overflow-scrolling: touch; }
移动端web页面滚动不流畅,卡顿闪烁解决方案
1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overflow-scrolling: touch 2.position属性导致的页面滚动不流畅问题: <div style="overflow-x: hidden; overflow-y: auto; position: absolute; ...
html页面在safari浏览器中滑动不流畅问题
给有滚动条的元素添加:-webkit-overflow-scrolling:touch; 如 main{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
H5页面 部分Android 手机(魅族M721Q)滑动不流畅问题
魅族 弹窗内容滑动惯性停止之后不能继续向原来的方向滑动
HTML 提升HTML5的性能体验系列 列表流畅滑动
今天发现项目有一个页面滑动效果在iOS(iPhone6s&iPhoneSE)上十分顺畅,到安卓手机(三星新款手机,性能较高)上就很卡顿,百思不得其解。 请教了同学之后,找到这样一篇文章:提升HTML5的性能体验系列之二 列表流畅滑动 看了一下,意识到可能是因为div滑动而不是body滑动造成的卡顿。 检查了代码。 {{~it:value:index}}
移动端 --- 解决苹果手机滑动卡顿的问题
在滑动的页面上加上该样式: -webkit-overflow-scrolling : touch;
移动端手机浏览器页面出现上下滑动页面是涩的感觉,不流畅
最近在做手机端页面时,出现了上下滑动页面感觉很涩、不流畅的问题,经过在网上一番查找,发现添加如下代码就好:   body {     -webkit-overflow-scrolling: touch;     overflow-scrolling: touch;   }   解决问题地址:https://segmentfault.com/q/1010000012677016...
html5页面在ios滑动卡顿问题
此处只是一个笔记,有用的就拿去,自己是在使用div的overflow:scroll时发现的此问题,在iphone手机上效果非常卡,添加-webkit-overflow-scrolling:touch样式后,解决
移动端上下滑动页面不流畅
body{ -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-y: scroll; }  
实现滚动条丝滑滚动,流畅不卡顿,有回弹效果。-webkit-overflow-scrolling
1.我们经常会实现横划的滚动列表,如下图。但是手指离开屏幕 滑动停止,而且明显有点卡顿感,那么怎么解决这个问题~ 解决方式:给父类加-webkit-overflow-scrolling;touch 属性 解析:-webkit-overflow-scrolling;touch  属性控制元素在移动设备上是否使用滚动回弹效果.、           -webkit-overflow-sc
css ios H5页面web页面 上下滑动卡顿问题解决方案(亲测)
原因1: html,body{ height: 100%; } 删除上述代码即可。     其他原因: *{ -webkit-overflow-scrolling: touch; } 增加上述代码。
解决手机页面overflow scroll滑动很卡的问题
在手机页面上,如果你对某个div或模块使用了overflow scroll属性,那么在手机上滑动这个模块时会比较卡。 手机访问我写的一个测试页面可以体验这种卡的效果。 很奇怪会有这种差异。通过搜索得知以下代码可解决这种卡顿的问题: -webkit-overflow-scrolling: touch; 我在新的测试页面加了这行代码,果然滑动流畅了啊。 据说是因为这行代码启用了硬件加速特性
关于iscroll插件在移动端的应用滑动出现卡顿、不流畅问题
关于iscroll插件在移动端的应用滑动出现卡顿、不流畅问题
移动端滚动条不流畅问题
移动端设置overflow:scroll的时候,滑动不流畅很生硬。 可以在css中加入这段。 -webkit-overflow-scrolling: touch; 但是注意,ios端触发touch事件是在手指在屏幕上的操作期间。 例如touchend事件,是在你手指离开屏幕时就立即触发。而不是在滑动停止时触发。 如果需要绑定touch事件,建议用一些插件,例如iscroll.js。 ...
设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿
设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿,所以在这个div上加一个css: -webkit-overflow-scrolling : touch; 在苹果手机上使用-webkit-overflow-scrolling:touch会导致使用固定定位的元素,随着页面一起滚动,只有滚动停止时才会恢复原位。如果不用这个属性的话,使用overflow-y
手机滑动卡顿,怎么办?
父级加样式: overflow: scroll; -webkit-overflow-scrolling:touch; -moz-overflow-scrolling:touch; -o-overflow-scrolling:touch;
解决ios手机页面overflow scroll滑动很卡的问题
在移动端html中经常出现横向/纵向滚动的效果,但是在iPhone中滚动速度很慢,感觉不流畅,有种卡卡的感觉,但是在安卓设备上没有这种感觉;要解决这个问题很简单:一行代码搞定-webkit-overflow-scrolling : touch;
vue项目页面在苹果手机浏览器上上下滑动出现卡顿现象解决办法
在公用的样式底部加上 -webkit-overflow-scrolling: touch;
Android 界面滑动卡顿分析与解决方案
导致Android界面滑动卡顿主要有两个原因: 1.UI线程(main)有耗时操作 2.视图渲染时间过长,导致卡顿 目前只讲第1点,第二点相对比较复杂待以后慢慢研究。 众所周知,界面的流畅度主要依赖FPS这个值,这个值是通过(1s/渲染1帧所花费的时间)计算所得,FPS值越大视频越流畅,所以就需要渲染1帧的时间能尽量缩短。正常流畅度的FPS值在60左右,即渲染一帧的时间不应大于17ms。
苹果手机 滚动不流畅问题简单处理
-webkit-overflow-scrolling : touch;---加个这个就行 例:.left,.tcleft { position: fixed; font-size: .5rem; width: 21.3%; background: #f5f5f5; overflow-y: auto; z-index: 999; -webkit-overf
H5 移动端滑屏卡顿问题原因及解决方法
加入 *{ -webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling是什么东西 -webkit-overflow-scrolling控制元素在移动设备上面是否有滚动回弹效果,它可以设置成auto和touch auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。 touch: 使用具...
移动端页面滑动卡顿问题
在body上加入:-webkit-overflow-scrolling:touch
iscroll在手机上滑动不流畅,很卡,如何解决?
给scroll元素增加css样式:-webkit-transform:translate3d(0,0,0);
解决移动端滑动不流畅问题
//-webkit-overflow-scrolling : touch; 苹果css解决不流畅方法 var overscroll = function(el) { el.addEventListener('touchstart', function() { var top = el.scrollTop , totalScroll = el.scrollHeight , currentS...
vue项目在ios滚动不流畅问题的一点方法
vue项目在ios端出现滑动不流畅问题,我的解决方法是: 在对应的组件的最外层div上加上这样的样式: .box{ overflow-y: scroll; touch-action: pan-y; -webkit-overflow-scrolling: touch; } 然后在最外层再套一个div,不写任何样式,例如: <template> <div> &...
解决IOS手机页面overflow:scoll属性滑动很卡问题
加入一行-webkit-overflow-scrolling: touch;就可以滑动流畅了啊。据说是因为这行代码启用了硬件技术特性,所以滑动很流畅,但是这个属性也会相对消耗更多内容。在流畅的滑动效果和耗费多点内存之间,我选择了前者从前端开发的角度讲,只需要知道CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件,所以效率很高。但是这相对是耗更多内存...
Android 解决为什么自己的应用在后台进行切换滑动时,经过自己应用会卡顿、不流畅的问题
场景1:打开自己的应用后,将其切换到后台,然后点击后台进行查看各个在后台的应用时,经过自己的应用,会变得卡顿、不流畅场景2:在某些手机,可以在设置里面的更多应用处,有查看正在运行的程序的列表,经过自己的应用时,会变得卡顿,不流畅场景3:自己的应用在Manifest.xml进行了隐式调用,让别的应用可以在点击【使用其他应用打开】时触发弹出可选择列表时,变得卡顿,不流畅,甚至会导致别的应用会退出(亲测...
解决iPhone中overflow:scroll;滑动速度慢或者卡的问题
在移动端html中经常出现横向/纵向滚动的效果,但是在iPhone中滚动速度很慢,感觉不流畅,有种卡卡的感觉,但是在安卓设备上没有这种感觉; 要解决这个问题很简单: 一行代码搞定 -webkit-overflow-scrolling : touch;
ios手机页面滑动卡顿问题
说起来真是件悲伤的事情,开发了这么多移动端页面,今天犯了一个低级,而我却不知道的错误。因为现在移动设备真是贼辣多,手机屏幕的高度,宽度各式各样。所以我们有一些页面高度不够长,在iPhone8x、三星长屏手机等页面显示不全,所以我开发的时候,有时候会给html和body都设置上height:100%,所以在ios手机上这个页面滑动的时候就会卡顿了。正确的做法应该是这样的:给html设置一个min-h...
iOS上滑动不流畅问题解决办法
在  overflow:scroll部分,也就是需要滑动的层处,加css    -webkit-overflow-scrolling: touch;
Viewpager滑动不流畅问题
最近在做新闻项目,用到ViewPager嵌套了多个fragment,显示很多数据,有滑动卡顿,这里解决一下:public class BaseViewPager extends ViewPager { private int preX=0; public BaseViewPager(Context context, AttributeSet attrs) { supe
overflow-scrolling解决滚动卡顿问题
前言如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。解决方法以下代码可解决这种卡顿的问题:-webkit-overflow-scrolling: touch;,是因为这行代码启用了硬件加速特性,所以滑动很流畅。这个方法的确可以解决ios5.0、android4.0以后系统的滑动...
部分华为Android7.0手机 WebView滑动卡顿
今天碰到一个很恶心的问题,就部分华为Android7.0手机 WebView滑动卡顿,这种情况出现在最近发布的几款发布的华为手机上,解决方法就是给WebView加上背景。至于为什么,等待大牛解答。
移动端或微信浏览器中H5页面滚动时卡顿不流畅而且有时整个网页被拉起出现浏览器背景...
iOS端浏览器滑动卡顿不流畅可以用-webkit-overflow-scrolling: touch;通过提升内存占用提升流畅性;至于网页被拖起出现空白;可以禁止滑动事件,然后按需开启需要滑动的dom; overscroll(els) { for (var i = 0; i < els.length; ++i) { ...
那些我们解过的bug之listview滑动不流畅
这是一个一年前的bug,因为我要写一篇专利,想到了他,就整理出来!bug描述客户提出了一个问题: (android 5.0 高通平台)【压力测试】:通话记录中有500个时滑动不流畅 通话记录中有500个通话记录,上下滑动时,不流畅一看,是一个性能优化问题,这种问题有点不是怎么好解决的。bug重现我想先看一下这个现象是什么情况,问题来了,如何在通话记录中添加500条记录信息啊,显然手动添加是不
关于移动端滑动卡顿现象的解决方案
-webkit-overflow-scrolling: touch IOS 端特属属性,手指离开屏幕会保持滚动一段距离,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。 overflow: scroll; //该属性随着手指离开立即停止 -webkit-overflow-scrolling: touch;//该属性随着手指离开还会保持滚动 -webkit-transform: ...
解决ios元素滚动不流畅的问题
给滚动元素上添加: overflow-y: auto; -webkit-overflow-scrolling : touch;
解决ios局部滚动不流畅以及出界(黑)和键盘定制
解决ios局部滚动不流畅以及出界(黑)和键盘定制
vue:项目页面在苹果手机浏览器上上下滑动出现卡顿现象
在公用的样式底部加上 -webkit-overflow-scrolling: touch;
css隐藏滚动条,并解决在IOS滚动不流畅的问题
在移动端页面显示时,为了美观,我们一般会把overflow-x,overflow-y滚动条隐藏起来。.element{ overflow-x:scroll; overflow-y:auto; }温馨提示:一般在用到overflow-x,overflow-y的任意一个时,都建议把另外一个一起写上。隐藏滚动条一般主要是用到:.element::-webkit-scrollbar {disp...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 手机微信页面开发教程视频 区块链显卡价格