Scroll event not registered in body element in iframe
<p>There is a strange issue in <strong>firefox</strong>, scrolling in the iframe body does not bubble to the parent document. So when you are finished scrolling inside the iframe,it gets stuck and doesnt scroll the parent document.<br>
<strong>Any workaround for this issue is welcome.</strong><br><br>
My approach for this is getting scroll event on scrolling the iframe document, so that i can manually scroll the parent document.But i am not getting the scroll event when the iframe document is fully scrolled to the top or bottom.
<br>
Fiddle: <a href="https://jsfiddle.net/tdu9197g/" rel="nofollow">https://jsfiddle.net/tdu9197g/</a></p>

<p>Due to cross origin policy it is not working in the stackoverflow snippet. Please try the fiddle in firefox.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
  $($('iframe')[0].contentDocument).find('body').css('height',200);
  $($('iframe')[0].contentDocument).find('body').on('click',function(){
     $('iframe')[0].contentDocument.designMode='on';
  })
  $($('iframe')[0].contentDocument).find('body').on('blur',function(){
    console.log('blur called');
  });
  $('body').on('click',function(){
     $('iframe')[0].contentDocument.designMode='off';
  });
  $($('iframe')[0].contentDocument).find('body').on('scroll',function(){
     console.log('scroll');
  })
  $($('iframe')[0].contentDocument).find('body').on('mouseover',function(){
   console.log('scroll');
  })
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;




&lt;div&gt;
&lt;iframe&gt;
  
&lt;/iframe&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>