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

仅限Webkit，请尝试添加：

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

Answer 3

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

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

Answer 4

只需使用这个简单的css代码，它就会隐藏滚动条

body {
overflow: hidden;
}
html {
  overflow:   scroll;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

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

4 个答案: