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

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 install typeform-elements

并使用以下命令将嵌入库导入到您的应用程序入口点：

import 'typeform-elements/dist/embed';

最后按原样使用该组件...

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

embed组件具有一些属性，您可以在这里使用和了解。如果事情不起作用，请提出一个问题！