h5页面滑动卡顿解决方法

解决方式:

    给滚动的元素加样式:-webkit-overflow-scrolling: touch;

    -webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹)

    如果值为auto,就是普通的滚动,手指离开就停止滚动,让人感觉有点卡顿

    如果设置为touch,在手指离开后还会滚一下,有回弹效果,看上去很流畅

    但是刚开始用的时候有个小bug,h5页面打包成app时,一开始写成了*{-webkit-overflow-scrolling: touch;},导致滚动到最后页面底部出现空白,把这句样式加到要滚动的元素上面就可以了。

原文地址:https://www.cnblogs.com/xinyueBlog/p/11239649.html

时间: 2024-07-28 18:42:00

h5页面滑动卡顿解决方法的相关文章

android切换卡顿解决方法

如果想要让应用用户流畅的滑动体验的话,那么就必须对activity和fragment的生命周期有一个完整的概念以及在何种情况下会触发哪些事件. 在自己目前做的项目中,就遇到了这样的问题,那么就把自己的解决方法罗列,重点在于onpause,onstop,onstart,onresume的事件处理. 某些耗时的操作延迟加载,先展示总体页面. 当对某些复杂的页面进行切换时,先隐藏后显示,如果不是特别卡顿不需要隐藏,如果卡顿严重的话强烈推荐隐藏,提升用户体验. 代码如下: package com.hen

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

一.实习过程中被要求做一个二级菜单,点击展开覆盖主页面.在手机上测试,滑动过程中十分卡顿. 在二级菜单最外层加上-webkit-overflow-scrolling:touch ,之后就完全消除卡顿问题. 通过搜索知道,overflow:scroll可以使内容可以滚动,但是没有物理弹性,比较生硬,没有滚动条.如果想要IOS那种弹性的滚动效果可以使用-webkit-overflow-scrolling:touch. 从前端开发的角度讲,只需要知道CSS的属性-webkit-overflow-scr

使用IScroll组件出现滑动卡顿问题解决方法

var is = new IScroll('#wrapper2', { scrollX: true, scrollY: false, click: true, keyBindings: true, //加入以下三个可解决 disablePointer:true, disableTouch:false, disableMouse:true, }); 原文地址:https://www.cnblogs.com/chenjacky/p/11217088.html

使用apicloud开发移动端APP,IOS list页面滚动卡顿解决记录

给内容容器添加样式:-webkit-overflow-scrolling:touch; -webkit-overflow-scrolling:属性控制元素在移动设备上是否使用滚动回弹效果. auto:使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止. touch:使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果.继续滚动的速度和持续的时间和滚动手势的强烈程度成正比.同时也会创建一个新的堆栈上下文. 原文地址:https://www.cnblogs.com/sh

解决页面使用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 viewpager fragment切换时界面卡顿解决办法

目前开发的程序在切换View时界面卡顿现象比较严重,影响用户体验,当前项目共就四个View,每个View也只是按钮,所以可以同时加载,不让其它view销毁. 只需在Adapter中重载destroyItem类即可 @Override public void destroyItem(ViewGroup container, int position, Object object) { //重载该方法,防止其它视图被销毁,防止加载视图卡顿 //super.destroyItem(container,

android中listview滑动卡顿的原因

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

项目部署到tomcat6.0启动成功后访问页面报500错误解决方法

如题:项目部署到tomcat6.0启动成功后访问页面报500错误解决方法,很奇葩,启动的时候没有任何问题,但输入访问地址后报500,去年国庆放假前夕,为这个问题伤神了半天最后解决了,今天又碰到了,乍一看摸不着头,后面仔细回想了下,迅速解决了问题. 原因:项目里面的jar和tomcat里面lib里面的jar重复了. 解决方法: 1.要么更换tomcat7或之后的版本,之后的版本就不会出现这个问题. 2.去部署之后的tomcat的webapps\项目名\WEB-INF\lib 里面删掉jsp-api