Question

在我的Sencha应用程序中，我正在显示一个包含iframe的网页。当我滚动iframe的内容时，它的容器面板也会滚动它。由于它有时iframe不能正确滚动。是否需要更改iframe或面板的样式/ css ..？

代码：

Ext.define('Example.view.Dashboard', {
       extend : "Ext.Panel",
       alias : "widget.dashboard",
       config : {           
       layout: 'vbox',
       scrollable : false,                               
       hideAnimation : {
       type : "slideOut",
       direction : 'down',
       duration : 500
       },

       showAnimation : {
       type : "slideIn",
       direction : 'up',
       duration : 500
       },
       },

       initialize : function() {

       this.callParent(arguments);


       var cancelButton = {
       ui : "normal",          
       handler : this.onBackButtonTap,
       scope : this,
       id : 'cancelDashboardButton',
       itemId : 'cancelDashboardButton',         
       cls : 'button-left-arrow',
       };

       var topToolbar = {
       xtype : "titlebar",
       docked : "top",
       cls : 'header',
       name : 'detailToolbar',
       title : "Dashboards",
       itemId : 'dashboard-title',
       items : [cancelButton]
       };


       var bottomToolbar = {
       xtype : "toolbar",
       docked : "bottom",
       cls : 'footer',
       };

       this.add([topToolbar,
    {
               xtype : 'panel',
               itemId:'webContainer',
               flex:50,
               html : '<div style="-webkit-overflow-scrolling:touch; height: 1000px;     overflow: auto;"><iframe src="http://www.metacube.com/" border="0" frameborder="no" style="height:100%;width:100%;"> <iframe/></div>',
            },
                 bottomToolbar]);

       },

Answer 1

也许您可以在嵌套的iframe上侦听dragstart事件，然后在处理程序上调用事件stopPropagation方法。这应该可以防止事件传播到父容器并滚动它。

Panel在sencha应用程序中使用iframe滚动

1 个答案: