【问题标题】: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>

现在&lt;iframe src="blank.html" /&gt;

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

【讨论】:

  • 感谢建议,可惜blank.html无法修改。
【解决方案2】:

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

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

当(且仅当)内容高于 div 的高度时,这基本上使 iframe 具有滚动条。

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

#resize-box { height: 900px }

【讨论】:

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