海滨擎蟹

iScroll5 移动端(Android 安卓)滑动不流畅滑不动问题解决

这个问题是普遍存在的,上一篇 iScroll5 应用到多个元素 里引用的文档作者有相关的 demo,需要添加一段 js 兼容代码。

以下是从 demo 中摘录的内容,亲测可用:

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, isPassive() ? {
        capture: false,
        passive: false
    } : false);

    function isPassive() {
        var supportsPassiveOption = false;
        try {
            addEventListener("test", null, Object.defineProperty({}, 'passive', {
                get: function () {
                    supportsPassiveOption = true;
                }
            }));
        } catch(e) {}
        return supportsPassiveOption;
    }

注意:添加的 touchmove 事件监听绑定的为元素本身,实际应用中用 document 会导致整个文档禁用 touchmove。

结合上一篇应用多个元素的完整例子:

    $('.wrapper').each(function () {
        myScroll = new IScroll(this, {
            eventPassthrough : false,
            scrollX : true,
            scrollY : false,
            preventDefault : true,
            click:false
        });
        this.addEventListener('touchmove', function (e) { e.preventDefault(); }, isPassive() ? {
            capture: false,
            passive: false
        } : false);
    });

    function isPassive() {
        var supportsPassiveOption = false;
        try {
            addEventListener("test", null, Object.defineProperty({}, 'passive', {
                get: function () {
                    supportsPassiveOption = true;
                }
            }));
        } catch(e) {}
        return supportsPassiveOption;
    }

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »