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;

1 comment:

  1. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.

    kajal hot

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts