jQuery iframe scroll event (IE)

Question

Can't listen to the scroll event in Internet Explorer 7.

I've tried:

$("#myIframe").scroll(function() { alert('hi'); })

Works for FF:

$($("#myIframe").contents().get(0)).scroll(function() { alert('hi'); })

Getting keypresses work:

$($("#myIframe").contents().get(0)).keydown(function() { alert('hi'); })

Answer 1

As much as I love jQuery. I can't get this to work. However, I tried this in plain old javascript and it worked just fine in IE, FF,Safari and Chrome.

<script type="text/javascript">
    window.onload = function() {
      var frm = document.getElementById("myIframe").contentWindow;
      frm.onscroll = function(){
        alert("EUREKA");
      }
    }
</script>

EDIT: The following works in FF, Safari and Chrome when using window.load(). When using document.ready it only works in FF. For whatever reason it doesn't work in IE8 in either event.

$(window).load(function(){
    $($('#myIframe').contents()).scroll(function(){
       alert('frame scrolled in jquery');
    }); 
}); 

Answer 2

I know it's an old thread, but some people could find it useful.

$(document).scroll() can be replaced by $(window).scroll(), and it has worked for me so far.

Answer 3

Try this:

2 things must happen before you can traverse the dom of a nested browsing context.

You need to know that the iframe exists, taken care of with the document ready event.

And you need to make sure that the iframe has loaded.

ie:

    $(document).ready(function(){

        // #page is the id of the iframe
        $('#page').load(function(){
            // $(this)[0].contentWindow is the window of your nested browsing context/ iframe
            $($(this)[0].contentWindow).scroll(function(){
                console.log($(this).scrollTop());
            });
        });
     });

One thing to note is that this will definitely not work cross browser in Firefox.

Answer 4

Put this on the parent:

var childScrollHandler = function () {
   alert('Scrolling going on');
}

And then put this on the iframe content:

$(document).bind('scroll', function(ev){
    parent.childScrollHandler(ev);
});

replace $(document) by whatever element you are trying to listen into.