gist-react：将要点限制在带滚动条的 div 中

Question

我正在使用

gist-react

在我的 next.js 网站上嵌入要点。我很难将要点限制在带有滚动条的 div 中。我认为一个问题是，当要点加载时，我的 css 在模块中被覆盖。我想知道是否有一种方法可以将要点限制在带有滚动条的 div 中，而不需要修改底层依赖项。

@/projects/[slug]/page.jsx

import styles from "./singleProject.module.css"
import { Gist } from 'gist-react';
...
<div className={styles.gistContainer}>
    <Gist gistId="2223329" />
</div>

@/projects/[slug]/singleProject.module.css

.gistContainer{
    width: 45%;
    height: 30%;
}

在模块内部，请注意 iframe 主体中的 css 覆盖。

/node_modules/gist-react/dist/Gist.js

React.useEffect(() => {
    if (!ref.current) return;

    const $iframe = ref.current;

    $iframe.srcdoc = `
      <style>
        *{box-sizing: border-box; overflow-y: hidden;}
      </style>
      <base target="_blank">
      <script src="${url}"></script>`;
  }, [url]);

return (
    <iframe
      ref={ref}
      onLoad={() => {
        if (!ref.current) return;
        const $iframe = ref.current;
        const innerHeight = $iframe.contentDocument?.body.scrollHeight;
        $iframe.style.height = String(innerHeight) + 'px';
      }}
      style={{ border: 0, width: '100%' }}
      id={iframeId}
    />
  );

我多次尝试编辑依赖项，但我似乎无法让高度或滚动条按照我想要的方式工作。

React.useEffect()

：

• 删除了

  overflow-y: hidden

  。这添加了意想不到的滚动条。

return

声明：

• 从

  $iframe

  以及

  $iframe.contentDocument?.body

  中删除了高度样式

• 为

  $iframe

  添加了 maxHeight，还有

  $iframe.contentDocument?.body

我在CSS中尝试过

.gistContainer iframe{ width: 45%;height:30%;max-height:30%}

。这也不起作用，因为在依赖项调整 iframe 样式后，容器尺寸没有保留。

非重复：

• 如何更改动态嵌入要点的高度尝试过但失败了
• make-gist-embed-scrollable尝试但失败

Answer 1

@/projects/[slug]/singleProject.module.css

.gistContainer iframe{
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
}

这解决了部分问题。

以下是更改滚动条的方法：

/node_modules/gist-react/dist/Gist.js

$iframe.srcdoc = "\n      <style>\n        *{box-sizing: border-box; overflow-y: auto;}\nbody::-webkit-scrollbar {display: none;}      </style>\n      <base target=\"_blank\">\n      <script src=\"".concat(url, "\"></script>");

我选择遵守现有的代码格式约定。这似乎解决了我的问题。