• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

452
Views
javascript-How to detect scroll event in iframe?

I have a problem when I try add event scroll with iframe tage. generally, I use scroll event with div tag It was working well. but when I add scroll event in iframe tag to detect user scroll pdf page, It was not working. why cannot I access html elements in iframe?, I have code inspect below:

enter image description here

and I try to add javascript scroll event with iframe :

HTML Code:

<iframe id="myframe" src="doc.pdf"></iframe>

JavaScript Code:

document.getElementById('myframe').onscroll = function(){
	 	alert('scrolling page');
};

almost 3 years ago · Santiago Trujillo
3 answers
Answer question

0

An iframe does not have a scroll method, the document of the iframe does - you need to reference the inner document rather than your <iframe> tag.

You can reference it with iframe.contentDocument:

var iframe = document.getElementById('frame');

iframe.contentDocument.body.innerHTML = 'a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>';

iframe.contentDocument.addEventListener('scroll', function(event) {
  console.log(event);
}, false);
<iframe id="frame"></iframe>

See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement for more information

almost 3 years ago · Santiago Trujillo Report

0

JavaScript provide us onscroll as an attribute which passes parameters (Can be a function). But we got iframe here, try the following code snippet (jQuery).

$("#yourFrameId").load(function () {
     var iframe = $("#yourFrameId").contents();

    $(iframe).scroll(function () { 
        //your code here
    });
});
almost 3 years ago · Santiago Trujillo Report

0

I have faced the issue and here's one of my implementation.

var currAgreementTab = this.get('parentController').get('currAgreement');
var contractContainer = Ember.$('div#marginContractContainer');
var iframe = contractContainer.children(currAgreementTab.element)[0].contentWindow;

if (iframe) {
  iframe.onscroll = function() {
    var scrolledHeight = Ember.$(iframe).height() === Ember.$(iframe.document).innerHeight() ? Ember.$(iframe).height() : Ember.$(iframe.document).innerHeight() - Ember.$(iframe).height();

    if (Ember.$(iframe).scrollTop()  === scrolledHeight) {
      var currAgreementTab = that.get('parentController').get('currAgreement');
      Ember.set(currAgreementTab, 'checkDisabled', false);
    }
  }
}
almost 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error