Capture scroll event of a div

[Sn4k3]

Hey,

For a project we are working on, we need to display content of external HTML pages. To do so, I make use of an iframe. It shows the content correctly and I found a way to make it scrollable but when you test it on a iPad, only half of the iframe's content is loaded. So if you scroll down, you only see a white page.

How can I capture the scroll event of a div ?

Ext.define('VEP.view.EnrichmentView', {
    extend: 'Ext.Panel',
    xtype: 'enrichmentview',
    
    config: {
        cls: 'EnrichmentView',
        layout: 'vbox',
        url: null,
        items: [
            {
                xtype: 'panel',
                cls: 'testScrolling',
                height: '100em',
                scrollable: {
                    directionLock: true,
                    slotSnapSize: {
                        x: 100,
                        y: 100
                    }
                },
                items: [
                    {
                        xtype: 'label',
                        styleHtmlContent: true,
                        cls: 'loadingLabel',      
                        html: '<div style="width:1200px;height:3000px;position:fixed;top:0;left:0;background-color:Transparent;float:left;z-index:99;"></div><iframe onLoad="function() {parent.document.getElementById(\'contentFrame\').height = document[\'body\'].offsetHeight;}" id="contentFrame" style="scrolling:none;border:none;position:fixed;top:0;left:0;float:left;z-index:1;" width="1200px" height="3000px" src="http://nl.wikipedia.org/wiki/De_Da_Vinci_Code_(boek)" sandbox="allow-same-origin allow-forms allow-scripts"></iframe>'
                        //html: '<div style="width:1200px;height:3000px;position:fixed;top:0;left:0;background-color:Transparent;float:left;z-index:99;"></div><object style="height: 3000px; width: 1000px" type="text/html" data="http://nl.wikipedia.org/wiki/De_Da_Vinci_Code_(boek)">'
                    }
                ],
                
                initialize: function (view, eOpts) {
                        
                }
            }
        ]
    }
}); 

I need to capture the scroll event of the div I have put in the html tag of the inner panel. Any help would be very welcome and higly appriciated !

[mitchellsimoens]

You really need to listen for the scroll events on the panel as that's what is scrolling. To do that:

panel.getScrollable().getScroller().on('scroll', function() {...});

getScroller returns the Ext.scroller.Scroller instance where you have scrollstart, scroll and scrollend events.

[martyphee]

Any luck on this. I'm having the same issue with the scrolling not working.