We can control scroll position of IFrame if the source of IFrame is from same domain. We can get reference of element using ref. Observe below program
Note : This program won't work for cross domains for security reasons. 

To Run Example Code

execute below commands
npm install
npm start
now open index.html in browser

Program

Observe below program. we can use contentWindow.scrollTo to scroll IFrame
import React from 'react';
import classNames from 'classnames';

class ScrollDetector extends React.Component {

  constructor(props) {
    super(props);
    this.scrollDown = this.scrollDown.bind(this);
    this.scrollUp = this.scrollUp.bind(this);
    this.scrollPos = {
       xcoord:0,
       ycoord:0
    };
  }

  scrollDown() {
    this.scrollPos = {
       xcoord: Math.min(this.scrollPos.xcoord + 5, this.frame.contentWindow.document.body.offsetHeight),
       ycoord: Math.min(this.scrollPos.ycoord + 5, this.frame.contentWindow.document.body.offsetHeight)
    };
    this.frame.contentWindow.scrollTo(this.scrollPos.xcoord,this.scrollPos.ycoord);
  }

  scrollUp() {
    this.scrollPos = {
       xcoord: Math.max(this.scrollPos.xcoord - 5, 0),
       ycoord: Math.max(this.scrollPos.ycoord - 5, 0)
    };
    this.frame.contentWindow.scrollTo(this.scrollPos.xcoord,this.scrollPos.ycoord);
  }

  render() {
    return (
      <div>
        <button onClick={this.scrollDown}>Scroll down</button>&nbsp;&nbsp;&nbsp;<button onClick={this.scrollUp}>Scroll up</button><br/><br/>
        <iframe ref={(c)=>{this.frame = c}} src="frame.html"></iframe>
      </div>
    );
  }
}

ScrollDetector.propTypes = {
}

ScrollDetector.defaultProps = {
}

export default ScrollDetector;

0 comments:

Blogroll

Follow this blog by Email

Popular Posts