Sencha Touch: Scrolling an Ext.Panel with a Vimeo video inside breaks the scroll

2
votes

I'm running the latest download of off of the website download page.

I've got an html template with a nested iFrame that contains a Vimeo video.

When I touch any space AROUND the video, the panel scrolls exactly as expected, however, if I touch the video when trying to scroll, the whole app scrolls (tabbar menu, top toolbar, etc) and the actual panel doesn't scroll to reveal the content further down the page.

Is there a way to make it so that it scrolls properly no matter where on the screen you touch?

1
scrollsencha-touchext-panel

1 Answers

0
votes

You probably want to take a look at the dom events that are being fired and try to stop the ones that are giving you the issue. At worst the user may not be able to scroll when touching the video first.

I had a similar issue with Google Maps (not in an iframe however). If it was embedded in a scrollable panel, the panel would scroll at the same time as interacting with the map. What I did was stop the propagation of the DOM events at the containing element. This resulted in the map being able to scroll/zoom, but the panel no longer responded to the events as well.

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
        });
}