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

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 嵌入组件，我无法评论或解释它是如何工作的。然而，我最近创建并维护了一个 Web 组件库（根据我的测试，它与 React 配合得很好）。

您可以使用

安装它

npm install typeform-elements

并将嵌入库导入您的应用程序入口点：

import 'typeform-elements/dist/embed';

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

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

嵌入组件有一些您可以使用的属性 learn about here。如果事情不起作用，打开一个问题！

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

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

html

javascript

reactjs

typeform