如何在iframe中隐藏滚动条，但仍然可以滚动

Question

我的一个页面上有一个 iframe，其中有另一个页面。我想隐藏滚动条，但我找不到任何解决方案。 我已经尝试过

overflow: hidden;

但它不起作用。

请参阅以下代码：

    <iframe frameborder="0" src="https://google.com/"></iframe>

CSS代码：

   iframe{
      overflow: hidden;
    }     

Answer 1

由于您没有指定是否需要垂直或水平溢出的解决方案，我假设您正在谈论垂直溢出。

这可以在父 div 的帮助下完成。

1.设置父div的溢出为隐藏。 2. 将子 div 的溢出设置为 auto，宽度设置为 200%（或任何大于 100% 的值，或大于父级的宽度 - 以便滚动条隐藏）。

.container {
  width: 300px;
  overflow: hidden;
}

.child {
  width: 200%;
  height: 200px;
  overflow: auto;
}

jsfiddle

Answer 2

一些带有滚动和隐藏溢出-x 的父级，iframe 宽度为 105% 实际上只会隐藏右侧的滚动条

我的一些作品片段：

.narrow{
    width: 90%;
    max-width: 600px;
    margin: 20px auto;
}
.scrollbox {
/* It is not really important but incase u are wondering*/
    color: white;
    background: var(--bgt2);
    /* padding: 25px 0px 4rem; */
    width: 470px;
    overflow-y: scroll;
    overflow-x: hidden;
} 

.scrolly-container{
/* i dont really write all the css but i just need these to set the width into 100%*/
    display: block;
    overflow-y: scroll;
    width: 100%;
}

<div class="scrollbox scrolly-container">
            <div class="narrow" style="overflow-x:hidden;">
                    <div style="height: 100vh;">
                    <iframe id="formcontainer" src="https://docs.google.com/forms/d/1gr7gA9EpDLmSuRNvAG3aDwujG29-kNUa4a5-TNLusFM?>/viewform?embedded=true" width="120%" height="100%" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" >Memuat…</iframe>
                    </div>
            </div>
</div>

注意：它只隐藏 Chrome 中的滚动条，其他我不知道

Answer 3

不确定这是否仅适用于 iframe 的 css，但您可以使用scrolling='no'

<iframe frameborder="0" scrolling="no" src="https://google.com/"></iframe>

Answer 4

仅适用于 Webkit，请尝试添加：

::-webkit-scrollbar {
    display: none;
}