在 iFrame 中隐藏滚动条答案

【问题标题】：Hide scrollbar in iFrame在 iFrame 中隐藏滚动条
【发布时间】：2026-01-08 12:20:03
【问题描述】：

我知道这个问题以前被问过很多次，但问题是我正在尝试使用 html、css、Jquery 构建一个响应式工具。我正在使用 iframe 来显示 html（例如：登录页面）并查看不同的响应式视图，但是当内容高于滚动条出现的窗口（水平、垂直条）时，我想在至少水平条，因为如果我有一个 320px 的响应式视图，当滚动条出现时它会隐藏部分内容，我必须使用水平滚动。

我尝试了不同的代码，但没有人工作。所以你能帮帮我吗？谢谢！

<div id="resize-box">
                <iframe src="blank.html" frameborder=0 scrolling="no"></iframe>
</div>

如果我使用“不滚动”，它会隐藏滚动条，但功能会停止工作，我需要它。

我试过了，但不走运。 Hide horizontal scrollbar on an iframe?

【问题讨论】：

您确认滚动条在 iframe 上，而不是在 div 或其他父元素上吗？请在您的属性周围加上引号 (frameborder="0")。
我刚刚添加了引号谢谢！我确认我认为是 iframe，因为如果我添加它 scrolling="no" 滚动条会消失，但功能也会消失

标签： jquery html css iframe

【解决方案1】：

编辑 blank.html 喜欢 >

<html>
<head>
    <style>
    html, body {
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    #bla {
        position: absolute;
        left: 0;
        top: 0;
        right: -30px;
        bottom: 0;  
        padding-right: 15px;
        overflow-y: scroll;
    }
    </style>
</head>
<body>
    <div id="bla">
         <!-- lines here -->
    </div>
</body>

现在<iframe src="blank.html" />

如您所见，滚动条已隐藏但仍可滚动。

【讨论】：

感谢建议，可惜blank.html无法修改。

【解决方案2】：

兄弟...使用一行css...

#resize-box iframe { overflow-y: auto }

当（且仅当）内容高于 div 的高度时，这基本上使 iframe 具有滚动条。

只需确保您的 id 为“resize-box”的 div 具有设定的高度，例如

#resize-box { height: 900px }

【讨论】：

感谢您的帮助。但我认为你没有得到我需要的东西。当我调整 div 的大小时，我得到一个水平滚动条。前任。我调整了 320px 的大小，垂直滚动条占用了一些空间和内容，水平滚动条出现了。显然我需要滚动条或至少需要功能，因为如果内容更高，我需要向下滚动