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. ไม่ใช่เรื่องง่ายเสมอไปที่จะบอกได้ว่าคาสิโนออนไลน์ปลอดภัยหรือไม่ https://ivip9-casino.com/ แต่มีสัญญาณที่ต้องระวัง โดยทั่วไป: หากคาสิโนออนไลน์ใช้ซอฟต์แวร์ Microgaming หรือ Cryptologic คุณสามารถมั่นใจได้ว่าผู้จำหน่ายซอฟต์แวร์เข้มงวดเกี่ยวกับผู้ที่พวกเขาให้ใบอนุญาต

    ReplyDelete

Blogroll

Popular Posts