title: Problem triggering a scroll event in an iFrame in Javascript
body: <p>I'm having a hard time on this one, and although many people on the internet seem to have the same problem, no solution online has worked for me.</p>
  <p>I have the following html code:</p>
  <pre><code>&lt;iframe id=&quot;documentIFrame&quot; src='http://localhost:49551//Documents/System/ef4be80c-a8d8-482e-9792-50c5692aa07f.pdf' width='100%' height='100%' frameborder='0'&gt;&lt;/iframe&gt;
  </code></pre>
  <p>And then this is the following js code I've tried:</p>
  <p>1)</p>
  <pre><code>$(&quot;#documentIFrame&quot;).on('load', function () {
                  var iframe = document.getElementById('documentIFrame');
                  iframe.contentDocument.addEventListener('scroll', function (event) {
                      console.log(&quot;SCROLL&quot;);
                  }, false);
              });
  </code></pre>
  <p>This shows no result, it will not even enter the function.</p>
  <p>2.</p>
  <pre><code>            var iframe = $(&quot;#documentIFrame&quot;).contentWindow;
              
              $(iframe).scroll(function () {
                  console.log(&quot;NOW SCROLLING...&quot;);
                  if ($(iframe).scrollTop() == $(iframe).height() - $(&quot;#documentIFrame&quot;).height()) {
                      alert(&quot;Reached bottom!&quot;);
                  }
              });
  </code></pre>
  <p>Same as before, no result at all.</p>
  <p>3)</p>
  <pre><code>                var iframe = document.getElementById(&quot;documentIFrame&quot;).contentWindow;
                  console.log(iframe);
  
  
                  iframe.onscroll = function () {
                      console.log(&quot;scrolling...&quot;);
                  }
  </code></pre>
  <p>Same, no result.</p>
  <p><strong>EDIT:</strong> Some extra info on this one, in this case, if I <code>console.log()</code> the <code>iframe</code> AFTER I assign the function to the <code>onscroll</code> event, and I search within the <code>iframe</code>, the <code>onscroll</code> event appears as <code>null</code>.</p>
  <p><strong>EDIT 2:</strong> This may come in handy for some of you, using <code>jQuery</code> to select the <code>.contentWindow</code> doesn't work for me, it comes as <code>undefined</code>, but if I use the plain JS code:</p>
  <pre><code>document.getElementById(&quot;documentIFrame&quot;).contentWindow;
  </code></pre>
  <p>... then it returns the element just fine.</p>
  <p>I have also tried <code>.contents()</code> and <code>contentDocument</code> instead of <code>contentWindow</code>, and the result is the same; if I try to <code>console.log()</code> those elements, they always come undefined.</p>
  <p>I've tried setting the scrolling function on the <code>document.ready()</code> and also on a function I call on a onclick event triggered by a different component; always is the same result.</p>
  <p>I've read something about same origin policy, but I don't think that should be it, as this document (the one in the <code>src</code> of the <code>iframe</code>) comes from the localhost, that should pass as &quot;same origin&quot;, correct?</p>
  <p>Any help would be greatly appreciated.</p>