How to prevent an embeded type-form to scroll after loading

Question

I am building a ReactJS application and have a typeform which I embed to the middle of the page. Problem is that as soon as the Type-Form loads in the https://www.npmjs.com/package/@heyjobs/react-typeform-embed

Code:

class OverTheCounter extends Component {
  render() {
    return (
      <div className="OtcContainer">
        <div className="overTheCounterPage">
          {/*<img  src={image1} alt="HeaderImage" />
      <h1 >Over the counter</h1>
   </div>
   <OtcIcon />
   */}
        </div>
        <ParallaxHeader />
        <div className="typeForm">
          <ReactTypeformEmbed
            className="typeForm"
            url="https://xxx.typeform.com/to/XXX"
          />
        </div>
        <OtcIcon />
        <Footer />
      </div>
    );
  }
}
export default OverTheCounter;

Answer 1

So for the react embed component you're using I can't comment or explain how it works. However I recently created and maintain a web components library (which from my tests works well with React).

You can install it with

npm install typeform-elements

And import the embed library into your apps entry point with:

import 'typeform-elements/dist/embed';

And finally use the component as so...

<typeform-standard url="{typeform_url}"></typeform-standard>

The embed component has a few attributes you can use and learn about here. And if things don't work, open an issue!