Sencha Touch：滚动带有 Vimeo 视频的 Ext.Panel 会破坏滚动答案

【问题标题】：Sencha Touch: Scrolling an Ext.Panel with a Vimeo video inside breaks the scrollSencha Touch：滚动带有 Vimeo 视频的 Ext.Panel 会破坏滚动
【发布时间】：2011-06-16 23:44:51
【问题描述】：

我正在从网站下载页面运行sencha-touch 的最新下载。

我有一个包含 Vimeo 视频的嵌套 iFrame 的 html 模板。

当我触摸视频周围的任何空间时，面板会完全按预期滚动，但是，如果我在尝试滚动时触摸视频，整个应用程序会滚动（标签栏菜单、顶部工具栏等），而实际面板不会t 滚动以显示页面下方的内容。

有没有办法让它无论你触摸屏幕的哪个位置都能正常滚动？

【问题讨论】：

标签： sencha-touch scroll sencha-touch ext-panel

【解决方案1】：

您可能想查看正在触发的 dom 事件，并尝试停止那些给您带来问题的事件。在最坏的情况下，用户在先触摸视频时可能无法滚动。

我在使用 Google 地图时遇到了类似的问题（但不在 iframe 中）。如果它嵌入到可滚动面板中，则面板将在与地图交互的同时滚动。我所做的是停止在包含元素处传播 DOM 事件。这导致地图能够滚动/缩放，但面板也不再响应事件。

domEvent: function(evt, el, o)
{
     evt.stopPropagation();
},

somefunction: function(){
    this.googleMap.el.on({
            tap: this.domEvent,
            touchstart:this.domEvent,
            touchmove:this.domEvent,
            touchdown:this.domEvent,
            scroll:this.domEvent,
            pinch:this.domEvent,
            pinchstart:this.domEvent,
            pinchend:this.domEvent
        });
}

【讨论】：

对不起，我的 JS 排骨不是很好。我不完全理解你的例子。我知道它应该做什么，但我不知道如何实现它。 :(
它接受 Ext.Map (this.googleMap)，获取 HTML 元素（它是一个 Ext.Element），并为该元素上的 DOM 事件注册一个函数。然后该函数阻止事件向上传播到 DOM，并由滚动组件处理。