ios 平滑移动view_解决页面使用overflow: scroll在iOS上滑动卡顿的问题
最近的一次开发中,使用到了overflow:scroll 属性来滑动div。
如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象。
但是在android系统的手机上则不会出现该问题。大家不妨可以分别使用IOS和Android系统的手机浏览以下链接,滑动文字区域查看该效果(重点是记住iPhone浏览时的效果,方便浏览后文):http://geek100.com/demo/os.html.
以下代码可解决这种卡顿的问题:-webkit-overflow-scrolling: touch;,是因为这行代码启用了硬件加速特性,所以滑动很流畅。
实际上,Safari真的用了原生控件来实现,对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。
在WebKit 108400版本左右才支持,所以iOS Safari应该是需要5.0。Android则是在4.0以上支持。
从前端开发的角度讲,只需要知道CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件,所以效率很高。
上述所说的方法的确可以解决ios5.0、android4.0以后系统的滑动卡顿问题,不过呢在这还可以为大家推荐一些相关插件:iScroll
IScroll 实践指南
之所以iscroll会诞生,主要是因为无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。
这个不幸的规则导致所有web-app要模拟成app的样子时,只能由一个绝对定位的header 或是footer再加上一个可以内容的滚动的中间区域组成。
幸运的是移动webkit提供了一种强大的硬件加速的CSS属性,这个属性可以用来模拟这个缺失的功能,Iscroll从这里开始了前进之路,但是没有不带刺的玫瑰。让内容滚动像原生方式一般比想象中要难
通过样式:
overflow:scroll;
-webkit-overflow-scrolling:touch;
IOS5 已经能够支持区域滚动了。但是andriod4 还是不行...
iScroll 使用起来很简单,首先你需要一个合理的DOM结构:
...
...
推荐的样式:
#wrapper {
position:relative;
z-index:1;
width:/* your desired width, auto and 100% are fine */;
height:/* element height */;
overflow:/* hidden|auto|scroll */;
}
官方推荐这样的结构,因为iscroll只能滚动wrapper里的第一个子节点,或者说唯一一个子节点才能使得iscroll正确的生效。因为这个节点需要一个绝对定位的CSS属性,更重要的是这个节点里所包裹的内容有了一个统一的容器,我们只需要计算之后修改这个容器的属性值就可以达到我们滚动的效果。
iscroll 需要两个参数,第一个很简单就是外容器的id,第二个参数是一个参数对象。
通过这个对象可以传入iscroll的各项参数来配置iscroll。
他的参数基本分为四个部分
基础
滚动条
放大缩小
事件回调
以下是 iScroll参数以及其代表的意思:
hScroll: true, //是否水平滚动
vScroll: true, //是否垂直滚动
x: 0, //滚动水平初始位置
y: 0, //滚动垂直初始位置
bounce: true, //是否超过实际位置反弹
bounceLock: false, //当内容少于滚动是否可以反弹,这个实际用处不大
momentum: true, //动量效果,拖动惯性
lockDirection: true,
//当水平滚动和垂直滚动同时生效时,当拖动开始是否锁定另一边的拖动
useTransform: true, //是否使用CSS形变
useTransition: false, //是否使用CSS变换
topOffset: 0, //已经滚动的基准值(一般情况用不到)
checkDOMChanges: false, //是否自动检测内容变化
checkDOMChanges 这个不是十分靠得住,因为他目前是轮询检测offsetWidth、offsetHeight,然后才去调自身的refresh 重新计算滚动区域,但是有时候只检测这个不是很准..
// Scrollbar 的相关参数
hScrollbar: true, //是否显示水平滚动条
vScrollbar: true, //同上垂直滚动条
fixedScrollbar: isAndroid, //对andriod的fixed
hideScrollbar: isIDevice, //是否隐藏滚动条
fadeScrollbar: isIDevice && has3d, //滚动条是否渐隐渐显
scrollbarClass: '', //字定义滚动条的样式名
通过scrollbar这些参数可以配置iscroll的滚动条,通过scrollbarClass可以自己定义一套滚动条的样式。
// Zoom 放大相关的参数
zoom: false, //默认是否放大
zoomMin: 1, //放大的最小倍数
zoomMax: 4, //最大倍数
doubleTapZoom: 2, //双触放大几倍
wheelAction: 'scroll', //鼠标滚动行为(还可以是zoom)
这个Zoom我觉得比较好用,对于一个固定显示图片区域的类似应用,可以非常简单的做到固定滚动,包括两指放大的应用。
wheelAction 这个参数是给PC的鼠标滚动定义的,可以定义为滚动鼠标滚轮放大。
// 自定义 Events 的相关参数
onRefresh: null, //refresh 的回调,关于自身何时调用refresh 后面会继续谈到
onBeforeScrollStart: function (e) { e.preventDefault(); },
//开始滚动前的时间回调,默认是阻止浏览器默认行为
onScrollStart: null, //开始滚动的回调
onBeforeScrollMove: null, //在内容移动前的回调
onScrollMove: null, //内容移动的回调
onBeforeScrollEnd: null, 在滚动结束前的回调
onScrollEnd: null, //在滚动完成后的回调
onTouchEnd: null, //手离开屏幕后的回调
onDestroy: null, //销毁实例的回调
onZoomStart: null,
onZoom: null,
onZoomEnd: null
通过了解以上参数,你可以非常容易的配置自己的iscroll 应用:
你可以通过onScrollEnd 事件回调在结束滚动后执行一段你自己的代码
你也可以简单的新建一个可以通过双触放大的固定滚动区域。
你也可以什么都不做,只是简单的约定碰到边界是否反弹,等等。
var myscroll = new iScroll('wrapper', {
hScroll: false, //是否水平滚动
vScroll: true, //是否垂直滚动
y: 10, //滚动垂直初始位置
bounce : false
});
当然,在使用时,如果对创建的iscroll 实例保存引用会有很多好处:
你可以在内容改变时,DOM结构发生改变时调用 myscroll.refresh()来重新计算固定滚动区域的内容高度,从而使得你的iscroll工作正常。
你也可以在你的应用结束时,用过这个引用调用destroy方法来,销毁这个iscroll 实例
等等....
当然,iscroll提供的Api也是非常丰富,所以我们可以通过使用iscroll来做很多webapp的应用
下面介绍一下iscroll的公用调用方法,以及参数的控制。
如何使用 iscroll 提供的API,以及一些没有提供的功能,如何通过参数来控制iscroll
Iscroll 提供的调用方法有:
destroy
refresh
scrollTo
scrollToElement
scrollToPage
disable
enable
stop
zoom
isReady
destroy
顾名思义,是用来销毁你实例化的iScroll 实例,包括之前绑定的所有iscroll 事件。
refresh
这个方法非常有用,当你的滚动区域的内容发生改变 或是 滚动区域不正确,都用通过调用refresh来使得iscroll 重新计算滚动的区域,包括滚动条,来使得iscroll 适合当前的dom。
scrollTo
这个方法接受4个参数x, y, time, relative x为移动的x轴坐标,y为移动的y轴坐标, time为移动时间,relative表示是否相对当前位置。
scrollToElement
这个方法实际上是对scrollTo的进一步封装,接受两个参数(el,time),el为需要滚动到的元素引用,time为滚动时间。
scrollToPage
此方法接受三个参数(pageX,pageY,time)当滚动内容的高宽大于滚动范围时,iscroll 会自动分页,然后就能使用scrollToPage方法滚动到页面。当然,当hscroll为false 的时候,不能左右滚动。pageX这个参数就失去效果
disable
调用这个方法会立即停止动画滚动,并且把滚动位置还原成0,取消绑定touchmove,touchend、touchcancel事件。
enable
调用这个方法,使得iscroll恢复默认正常状态
stop
立即停止动画
zoom
改变内容的大小倍数,此方法接受4个参数,x,y,scale,time分别表示的意思为,放大的基准坐标,以及放大倍数,动画时间
isReady
当iscroll 没有处于正在滚动,没有移动过,没有改变大小时,此值为true
上一篇没有谈到snap这个属性,而这个属性往往是需要用iscroll作滚动组件非常关键的一个属性。还记得我们的iphone 菜单滚动效果吧?当手指触摸屏幕向左拉动到一半的情况,应用菜单会自动滚动对齐到下一页。这个snap 属性就是用来实现这种效果的。
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
snap: 'li',
momentum: false,
hScrollbar: false,
vScrollbar: false
});
}
document.addEventListener('DOMContentLoaded', loaded, false);
以上是官方例子的代码,展示了iscroll 滑动对齐到元素li。
snap值可以为true 或是 DOM元素的tagname,当为true时,对齐的坐标会根据可滚动的位置和滚动区域计算得到可滑动几页。如果为tagname,则滑动会对齐到元素上。举个例子
假设有这样一个列表,每个li里的img 都为居中显示,maxWidth 都等于屏幕宽度,li的宽度都为屏幕的宽度,那么上面的代码就可以实现一个滚动图片组件了
![](img.jpg)
![](img.jpg)
![](img.jpg)
![](img.jpg)
我们看到 iscroll 的所有的属性和 api 都旨在做一件事情,就是在固定区域内滚动。当然通过snap,我们可以很好的模拟iphone 菜单间的平滑滚动。
ios 平滑移动view_解决页面使用overflow: scroll在iOS上滑动卡顿的问题相关推荐
- 解决页面使用overflow: scroll在iOS上滑动卡顿的问题
解决页面使用overflow: scroll在iOS上滑动卡顿的问题 参考文章: (1)解决页面使用overflow: scroll在iOS上滑动卡顿的问题 (2)https://www.cnblog ...
- html页面滑动不流畅,解决页面使用overflow:scroll在移动端iOS系统上滑动出现卡顿的问题...
对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象.但是在android系统的手机上则不会出现该问题. 通过一个早上的爬虫搜索和与前端开发 ...
- h5 android 滚动条卡顿,h5页面滑动卡顿解决方法
解决方式: 给滚动的元素加样式:-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹) 如果值为au ...
- app内嵌h5页面在ios手机端滑动卡顿的解决方法
app内嵌h5页面在ios手机端滑动卡顿的解决方法 参考文章: (1)app内嵌h5页面在ios手机端滑动卡顿的解决方法 (2)https://www.cnblogs.com/1rookie/p/11 ...
- 微信小程序ios滑动问题(滑动卡顿,下拉拖动自定义导航栏)
微信小程序ios滑动问题(滑动卡顿,下拉拖动自定义导航栏) 1.ios中个别机型类似6s ,对微信自带的scroll-view无法滑动: 解决:在滑动内容区添加css属性,overflow: auto ...
- 无需SherlockActionbar的SlidingMenu使用详解(一)——通过SlidingMenu设置容器并解决滑动卡顿的问题
无需SherlockActionbar的SlidingMenu使用详解(一)--通过SlidingMenu设置容器并解决滑动卡顿的问题 参考文章: (1)无需SherlockActionbar的Sli ...
- android与ios系统优缺点,安卓系统与苹果iOS系统的差别,谁更好用?为什么系统会卡顿?...
在现在的智能手机圈,主要有两类操纵系统,一类是谷歌的安卓系统,目前最新的版本为Android P系统,该系统为开源系统,简单讲就是业态共享,比如谷歌手机的原生系统.华为的EMUI定制系统.小米的MIU ...
- android 10.0 更换壁纸加载慢滑动卡顿的解决
1.概述 在10.0的系统产品开发中,在产品开发中对于更换壁纸的时候,如果不是标准的分辨率,会出现更换完壁纸后 壁纸被放大的情况,这样就会感觉到壁纸在更换后,Luancher3在滑动 切换WorkSp ...
- ios手机页面滑动卡顿问题
说起来真是件悲伤的事情,开发了这么多移动端页面,今天犯了一个低级,而我却不知道的错误. 因为现在移动设备真是贼辣多,手机屏幕的高度,宽度各式各样. 所以我们有一些页面高度不够长,在iPhone8x.三 ...
最新文章
- 250鲁大师跑分_我装了一台鲁大师 230W 分的神机,3A 游戏平台装机作业
- 跟JBPM学设计模式之适配器模式
- 动态代理源码分析,实现自己的动态代理
- C语言变长数组data[0]【总结】
- ElasticSearch 倒排索引_08
- 三角形分类(洛谷P5717题题解,Java语言描述)
- 鸿蒙系统的升级名单,定档6月2日!鸿蒙“首批”升级名单公布,共计11款华为机型!...
- MongoDB初探系列之二:认识MongoDB提供的一些经常使用工具
- Angular 7和ASP.NET Core 2.1入门
- 计算机的工作原理是二进制原理吗,电子计算机的工作原理基于二进制。()
- spring boot 核心_Spring Boot 的 10 个核心模块
- Sqlserver2005迁移至Oracle系列之二:生成存储过程
- mysql的动态建表_mysql数据库动态创建表的实例分享
- 【系列二之图像处理系列】波形处理(2)
- 通达信自编的选股公式如何使用
- 免费个人简历模板、PPT模板网址大全
- 如何取得销售订单中订单货币和本位币之间的汇率 (exchange rate)
- 5G通信在应急系统中的应用
- win10右键文件夹无反应
- 小程序云开发db封装
热门文章
- Confluence 6 配置 workbox 通知
- c# base 和this 继承
- [Asp.Net] Form验证中 user.identity为false
- 数组用法以及引用类型和值类型
- 各種語系的unicode對應以及local編碼方式
- 通向KDE4之路(十一):Amarok2开辟起步
- 希尔排序不稳定例子_Python实现希尔排序(已编程实现)
- 《Python网络程序设计》教学大纲
- Python代码调试之异常回溯
- Python“制作”midi音乐“两只老虎”