iframe内部滚动条卡住了

Question

我有一个页面，其中有一个 iframe。对于样式，我使用 tailwind-css。现在我有两个滚动条 - iframe 内部滚动条和浏览器滚动条，我想隐藏 iframe 的内部滚动条并随浏览器滚动条滚动。我尝试使用

scrolling="no"

，内部滚动条被移除，但浏览器滚动被卡住，iframe 未完全显示

<div className="h-full overflow-scroll>
   <iframe
      src={url}
      frameBorder="0"
      width="100%"
      scrollbar="no">
   </iframe>
</div>

你知道我该怎么做吗？先谢谢你了

Answer 1

设置高度以适合内容并禁用滚动条

<div className="h-full overflow-scroll>
   <iframe
      src={url}
      frameBorder="0"
      width="100%"
      height="640px"
      scrollbar="no">
   </iframe>
</div>

Answer 2

在其之上创建绝对值并使其成为绝对值

<section className="relative">
    {/* Overlay div placed above the iframe */}
    <div className="w-full h-full absolute z-10"></div>
    
    {/* Wrapper div for the iframe with overflow hidden */}
    <div className="overflow-hidden">
        <iframe
            src="url" // Replace 'url' with your actual iframe source
            height="650"
            className="w-full xl:-mt-16 md:-mt-12 lg:-mt-12 no-scroll"
            loading="lazy"
        ></iframe>
    </div>
</section>