在iFrame中隐藏滚动条

Question

I know this question has been asked a lot before but the problem is that I'm trying to build a responsive tool with html, css, Jquery. 我知道这个问题之前已经被问过很多，但问题是我正在尝试使用html，css，Jquery构建响应工具。 I'm using an iframe to display the html (example: a landing page) a see the different responsive views, but when the content is higher that the window the scroll bar appears (horizontal, vertical bar), I would like to dissapear at least the horizontal bar, because if I have a responsive view of 320px, when scrollbar appears it hides part of the content and I have to use the horizontal scroll. 我正在使用iframe显示html（例如：着陆页）并看到不同的响应视图，但是当内容高于窗口时，滚动条会出现（水平，垂直条），我想在至少是水平条，因为如果我有一个320px的响应视图，则当滚动条出现时，它会隐藏部分内容，因此我必须使用水平滚动。

I tried different codes no one worked. 我尝试了不同的代码，没人能用。 So could you please help me. 那你能帮我吗 Thanks! 谢谢！

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

If I use "scrolling no" it hides the scroll bar but the functionally stops working and I'll need it. 如果我使用“ scrolling no”，它会隐藏滚动条，但功能会停止工作，我需要它。

I tried this but no lucky. 我尝试了这个，但并不幸运。 Hide horizontal scrollbar on an iframe? 隐藏iframe上的水平滚动条？

Answer 1

Edit blank.html like > 像这样编辑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>

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

As you see, scrollbar is hidden but still scrollable. 如您所见，滚动条处于隐藏状态，但仍可滚动。

Answer 2

Bro... use one line of css... 兄弟...使用一行CSS ...

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

This basically makes the iframe have a scroll bar if (and only if) the content is taller than the height of the div. 当（且仅当）内容高于div的高度时，这基本上使iframe具有滚动条。

Just make sure that your div with id 'resize-box' has a set height eg 只需确保ID为“ resize-box”的div的高度已设置即可，例如

#resize-box { height: 900px }

在iFrame中隐藏滚动条

问题描述

2 个解决方案

解决方案1
0 2014-04-21 22:22:29

解决方案2
0 2014-04-21 22:48:18

在iFrame中隐藏滚动条

问题描述

2 个解决方案

解决方案1 0 2014-04-21 22:22:29

解决方案2 0 2014-04-21 22:48:18

解决方案1
0 2014-04-21 22:22:29

解决方案2
0 2014-04-21 22:48:18