css 如何在iframe中隐藏滚动条,但仍然能够滚动

kfgdxczn  于 5个月前  发布在  其他
关注(0)|答案(4)|浏览(86)

我在一个页面上有一个iframe,里面有另一个页面。我想隐藏滚动条,但我找不到任何解决方案。我试过overflow: hidden;,但它不起作用。
请看下面的代码:

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

字符串
CSS代码:

iframe{
      overflow: hidden;
    }

zmeyuzjn

zmeyuzjn1#

由于您没有指定是否需要垂直或水平溢出的解决方案,我假设您正在谈论垂直溢出。
这可以在父div的帮助下完成。
1.将父div的溢出设置为隐藏。2.将子div的溢出设置为auto,宽度为200%(或任何大于100%的值,或大于父div的宽度-以便隐藏滚动条)。

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

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

字符串
jsfiddle

mxg2im7a

mxg2im7a2#

一些带有滚动条和隐藏overflow-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%;
}

个字符
注意:它只隐藏滚动条在Chrome的其他我不知道

3pvhb19x

3pvhb19x3#

不知道这是否可能与css的iframe只,但你可以使用滚动='no'

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

字符串

z6psavjg

z6psavjg4#

仅适用于Webkit,请尝试添加:

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

字符串

相关问题