iScroll 优化

时间：2021-11-06 12:55:21

iScroll 它比较好的解决了移动互联网 web app 滚动支持问题以及点击事件缓慢的问题，经过简单配置即可让 web app 像原生 app 一样流畅，甚至都不需要改变原来的编码方式，目前它几乎是移动 web 开发的标配库。

受技术限制，iScroll 模拟滚动条也会带来一些问题，如：遇到异步写入元素后其不能及时适应新的高度/宽度。

为了解决 UI 刷新问题，它有提供 refresh 方法手动刷新 UI，但这样十分繁琐，你忘记执行它可能引发app的可用性问题。它提供 checkDOMChanges 选项用来自动监控 UI 变化，但却是使用定时器判断，每500ms执行一次，响应速度与性能都大打折扣。理想状态下它应“加载即用”，这样等未来不需要 iScroll 作为补丁的时候，我们可以立即删除掉 iScroll。

一、优化滚动条自适应容器

W3C 定义的 DOMSubtreeModified 事件可以监听节点的修改，不幸这个事件已经过时（最新的ios6仍然支持），幸运的是有了更强大的 MutationObserver 方法监听元素修改。

MutationObserver 给开发者们提供了一种能在某个范围内的 DOM 树发生变化时作出适当反应的能力。该 API 设计用来替换掉在 DOM3 事件规范中引入的 Mutation 事件。

自动监测容器内容修改

iScroll 构造函数中优先使用 MutationObserver ，同时也保留定时器的方式：

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

if (that.options.checkDOMChanges) {

    if (MutationObserver) {

        that.mutationObserver = new MutationObserver(that.refresh.bind(that));

        that.mutationObserver.observe(that.scroller, {

            childList: true,

            subtree: true

        });

    } else {

        that.checkDOMTime = setInterval(function () {

            that._checkDOMChanges();

        }, 500);

    }

}

注销监听

在 iScroll destroy 方法中注销监听：

if (that.options.checkDOMChanges) {

    if (MutationObserver) {

        that.mutationObserver.disconnect();

    } else {

        clearInterval(that.checkDOMTime);

    }

}

二、调整超出容器反弹行为

IOS应用程序、网页拖动页面超出容器时会出现反弹效果，但是 iScroll 的速度却比与默认行为更快，在私有 _end 函数倒数第二行

that._resetPos(200) 修改为 that._resetPos(600)
useTransform: true, 改为 useTransform: false,

相关文章