手机版页面滑动卡顿的问题

一、实习过程中被要求做一个二级菜单,点击展开覆盖主页面。在手机上测试,滑动过程中十分卡顿。

在二级菜单最外层加上-webkit-overflow-scrolling:touch ,之后就完全消除卡顿问题。

通过搜索知道,overflow:scroll可以使内容可以滚动,但是没有物理弹性,比较生硬,没有滚动条。如果想要IOS那种弹性的滚动效果可以使用-webkit-overflow-scrolling:touch。

从前端开发的角度讲,只需要知道CSS的属性-webkit-overflow-scrolling是创建了带有硬件加速的系统级控件,所以效率很高。但是这相对是耗更多内存的,最好在产生了非常大面积的overflow时才应用。

二、写在二级菜单中的底部fixed选项条也会随滑动上下抖动,将html中该部分移出二级菜单后,并加入与二级菜单同样的动画过度效果之后消除了抖动,而且视觉上效果相同。

相关blog:http://blog.csdn.net/hursing/article/details/9186199

http://www.cnblogs.com/flash3d/archive/2013/09/28/3343877.html

时间: 2024-10-10 08:57:01

手机版页面滑动卡顿的问题的相关文章

h5页面滑动卡顿解决方法

解决方式: 给滚动的元素加样式:-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹) 如果值为auto,就是普通的滚动,手指离开就停止滚动,让人感觉有点卡顿 如果设置为touch,在手指离开后还会滚一下,有回弹效果,看上去很流畅 但是刚开始用的时候有个小bug,h5页面打包成app时,一开始写成了*{-webkit-overflow-scrolling: touch;},导致滚动到最后页面底部出

解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题

解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-overflow-scrolling: touch; } 在使用overflow的的地方加上?-webkit-overflow-scrolling: touch;便可解决页面在ios机器上卡顿的问题. 解决由-webkit-overflow-scrolling: touch 引起的ios滚动条(将滚动

解决:ScrollView中嵌套ListView,使得listview上下滑动卡顿现象

效果图就是上面的那样!实现方式:上面是一个ViewPager实现的左右无限循环并带有自动轮播的banner.在banner图的下面是一个listview实现上拉加载的功能:但是在我实现的过程中我遇到了一个问题,就是整个页面的展示效果都已经实现,但是banner图连带下面的listview在上下滑动的时候出现卡顿的现象:当然之前也遇到了一个问题,就是我的banner图和listview一起放在了父控件ScrollView中,是的listview不能完全显示:那么就来解决这两个问题. 解决问题一:<

android中listview滑动卡顿的原因

导致Android界面滑动卡顿主要有两个原因: 1.UI线程(main)有耗时操作 2.视图渲染时间过长,导致卡顿 http://www.tuicool.com/articles/fm2IFfU

手机访问pc版网站自动跳转为手机版页面

function getMCookie(objName) { var arrStr = document.cookie.split("; "); for (var i = 0; i < arrStr.length; i++) { var temp = arrStr[i].split("="); if (temp[0] == objName) { return unescape(temp[1]); } } return ""; } funct

【php】手机版访问手机版页面选择“电脑版”之后不回到原来的手机版页面,利用Session实现

在<[JavaScript]通过JavaScript的方式,如果手机浏览器访问PC版页面,自动跳转到手机版页面>(点击打开链接)中现实了,如果用户通过手机访问你的PC页面,自动跳转到手机版页面,但是,这其中有一个问题,如果那些手机用户看到手机版页面之后,还是需要浏览PC版页面呢?此时,他们点击"电脑版"之后,由于JS的作用,还是回把他们扔回手机版页面. 当然,你可以说是这是用户的事情,让他们的手机浏览器改改浏览标识就是了,但是,我们应该把程序写得更加友好. 此时,可以利用p

腾讯面试题,js处理1千万条数据排序并且页面不卡顿

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

OPPO手机使用时间长变卡顿,我们要怎么解决这个问题呢

手机是我们日常生活中经常用到的工具,随着手机应用软件的种类增多,手机的内存也越来越大.但是所有的手机使用时间长了后都会有一些卡顿情况的出现,如果我们使用的手机是OPPO手机,那么面对OPPO手机卡顿的情况下,我们要怎么解决手机卡顿的情况继续使用OPPO手机呢?1.关闭后台应用我们的手机偶然会自己在后台启动一些自己没有在使用的软件应用,这些手机应用软件在手机后台自己悄悄的启动后,占据了我们手机在后台的运营内存,还消耗手机的电量,使手机在运营的时候变的卡顿,我们只需要在手机的设置中找到电池-耗电保护

Android Scrollview嵌套RecyclerView导致滑动卡顿问题解决

一个比较长的界面一般都是Scrollview嵌套RecyclerView来解决.不过这样的UI并不是我们开发人员想看到的,实际上嵌套之后.因为Scrollview和RecyclerView都是滑动控件.会有一点滑动上的冲突.导致滑动起来有些卡顿.这个时候.我们重写一下LayoutManager就行了 例如: [java] view plain copy LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getAct