Sencha Touch 2 & webkit-overflow-scrolling: 触摸

Posted 2023-02-26

【中文标题】Sencha Touch 2 & webkit-overflow-scrolling: 触摸

【英文标题】：Sencha Touch 2 & webkit-overflow-scrolling: touch

【发布时间】：2012-03-07 10:18:33

【问题描述】：

有没有人想出一个解决方案来让 -webkit-overflow-scrolling: touch 在 Sencha Touch 2 中工作？

虽然在 iPhone 上的表现相当不错，但 Sencha 的滚动条在 android 手机上还是太不稳定了。与此同时，CSS3 解决方案似乎是目前在 Android 上的选择。

谁有运气？

【问题讨论】：

如下 ilija 所述，新属性仅适用于 iPhone 上的 ios5。即使/当它确实涉及到 Android 时，你也需要处理它们的碎片：这意味着大多数 Android 用户在它下降后的很长一段时间内都不会看到该功能。你试过 Sencha Touch 2 吗？ Android 性能得到了极大提升-

【参考方案1】：

将原生样式滚动应用于给定的面板；

Ext.create('Ext.Panel', 
        style: 'overflow-y:scroll;-webkit-overflow-scrolling:touch;',
        id: 'scroll-panel',
        items:[...]
);

覆盖触摸移动事件以防止 Sencha Touch 控制该面板上的滚动

    var scrollPanelDom = Ext.get("scroll-panel").dom;
    scrollPanelDom.addEventListener("touchmove", function(e)
        e.stopPropagation();
    , false);

这样您就可以摆脱断断续续的滚动并在 IOS 设备上使用原生样式（并且根据我的测试，在 Android 设备上获得更好的滚动体验）

【参考方案2】：

目前，-webkit-overflow-scrolling 是 iOS 5 及更高版本上的 Mobile Safari 独有的。所以无论如何都没有Android。