title: Binding scroll event to iframe
body: <p>I'm using an iframe to load an external URL. Here's the structure - </p>
  
  <pre><code>&lt;iframe id="iframe-wrapper" src="http://blog.kpmg.ch/" style="width: 100%; height: 100%; overflow-y: scroll"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>I'm trying to do something when I scroll through the iframe contents. I tried various ways, nothing worked. Here are some things I tried already - </p>
  
  <p>1) <a href="https://stackoverflow.com/questions/930779/jquery-iframe-scroll-event-ie">jQuery iframe scroll event (IE)</a></p>
  
  <pre><code>    $(window).load(function(){
        $($('#iframe-wrapper').contents()).scroll(function(){
         alert("Scrolling");
        }); 
      });
  </code></pre>
  
  <p>2) <a href="https://stackoverflow.com/questions/930779/jquery-iframe-scroll-event-ie">jQuery iframe scroll event (IE)</a></p>
  
  <pre><code>    $('#iframe-wrapper').load(function(){
        $($(this)[0].contentWindow).scroll(function(){
          alert("Scrolling");
        });
      });
  </code></pre>
  
  <p>3) <a href="https://stackoverflow.com/questions/7279477/how-to-make-iframe-listen-to-scroll-events-as-parent-when-click-event-within-par">How to make IFRAME listen to scroll events as parent when click event within parent iframe is triggered</a></p>
  
  <pre><code>$("#iframe-wrapper").load(function(){
      var iframeContent = getFrameTargetElement( document.getElementById("iframe-wrapper") );
      iframeContent.onscroll = function(e){
          alert("Scrolling");
      };        
  });
  </code></pre>
  
  <p>4) <a href="https://stackoverflow.com/questions/2526726/jquery-and-binding-an-event-to-an-iframe">Jquery and binding an event to an iframe</a></p>
  
  <pre><code>$("#iframe-wrapper").load(function(){
      $("#iframe-wrapper").contents().find("body").scroll( function(e) {
          alert("Scrolling");
      });
  });
  </code></pre>