如何防止嵌入的字体在加载后滚动

Question

我正在构建一个ReactJS应用程序，并且有一个嵌入到页面中间的类型表单。问题在于，只要将Type-Form载入https://www.npmjs.com/package/@heyjobs/react-typeform-embed

代码：

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

因此，对于您正在使用的react embed组件，我无法评论或解释其工作原理。但是我最近创建并维护了一个Web组件库（根据我的测试，该库可与React很好地兼容）。您可以使用安装npm&nbsp;install&nbsp;typeform-elements并使用以下命令将嵌入库导入到您的应用程序入口点：import&nbsp;'typeform-elements/dist/embed';最后按原样使用该组件...<typeform-standard&nbsp;url="{typeform_url}"></typeform-standard>embed组件具有一些属性，您可以在这里使用和了解。如果事情不起作用，请提出一个问题！