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

【问题标题】：How to hide scrollbar in iframe, but still be able to scroll如何在 iframe 中隐藏滚动条，但仍然可以滚动
【发布时间】：2017-05-29 10:24:55
【问题描述】：

我在一个页面上有一个 iframe，里面有另一个页面。我想隐藏滚动条，但我找不到任何解决方案。我尝试过使用overflow: hidden;，但它不起作用。

见下面的代码：

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

CSS 代码：

   iframe{
      overflow: hidden;
    }

【问题讨论】：

应该可以隐藏滚动条还能滚动吗？ @ssc-hrep3
查看stackoverflow.com/questions/16670931/…
谢谢，但很抱歉，这不适用于 iframe 窗口..
Hide scroll bar, but still being able to scroll的可能重复
Remove scrollbar from iframe的可能重复

标签： html css scrollbar

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

设置滚动="no" 防止滚动

【解决方案3】：

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

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

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

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

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

jsfiddle

【讨论】：

是的，但你也隐藏了内容。
这个解决方案不会为我隐藏滚动条...

【解决方案4】：

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

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

【讨论】：