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

分手后的思念是犯贱 2022-04-10 10:45 549阅读 0赞

最近的一次开发中，使用到了overflow：scroll 属性来滑动div。  
如果你对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。  
但是在android系统的手机上则不会出现该问题。大家不妨可以分别使用IOS和Android系统的手机浏览以下链接，滑动文字区域查看该效果(重点是记住iPhone浏览时的效果，方便浏览后文)：[http://geek100.com/demo/os.html][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

[https://github.com/cubiq/iscroll][https_github.com_cubiq_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` 属性就是用来实现这种效果的。

以上是官方例子的代码，展示了iscroll 滑动对齐到元素li。

`snap`值可以为`true` 或是 DOM元素的`tagname`，当为`true`时，对齐的坐标会根据可滚动的位置和滚动区域计算得到可滑动几页。如果为`tagname`,则滑动会对齐到元素上。举个例子  
假设有这样一个列表，每个`li`里的`img` 都为居中显示，`maxWidth` 都等于屏幕宽度，li的宽度都为屏幕的宽度，那么上面的代码就可以实现一个滚动图片组件了

我们看到 iscroll 的所有的属性和 api 都旨在做一件事情，就是在固定区域内滚动。当然通过`snap`，我们可以很好的模拟iphone 菜单间的平滑滚动。

转载请注明原文出处：[http://qbaty.iteye.com/blog/1221061][http_qbaty.iteye.com_blog_1221061]

[http_geek100.com_demo_os.html]: https://link.jianshu.com?t=http://geek100.com/demo/os.html
[https_github.com_cubiq_iscroll]: https://link.jianshu.com?t=https://github.com/cubiq/iscroll
[http_qbaty.iteye.com_blog_1221061]: https://link.jianshu.com?t=http://qbaty.iteye.com/blog/1221061