如何禁用iframe的垂直滚动条？设置overflow:hidden无效怎么解决

你设置overflow属性不生效的核心原因有两个：一是overflow作用于父容器而非iframe元素本身，二是你嵌入的是跨域的谷歌文档资源，父页面无法直接修改iframe内部页面的样式，可按以下步骤修复：

• 给所有iframe元素添加HTML原生的scrolling="no"属性，你当前代码里的第二个iframe未配置该属性
• 给iframe新增专属CSS规则，覆盖不同浏览器的默认滚动条样式
• 用固定高度的父容器包裹iframe，给父容器设置overflow: hidden，裁剪超出高度的内容避免滚动条透出

修复后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
  .iframe-wrapper {
    overflow: hidden;
  }
  .embed-responsive {
    height: 300px;
  }

  iframe#monitor {
    width: 100vw !important;
    height: 300px;
  }


  iframe#monitor2 {
    width: 100vw !important;
    height: 500px;
  }
  /* 新增全局iframe滚动条隐藏规则 */
  iframe {
    overflow: hidden !important;
    scrollbar-width: none; /* 适配Firefox */
    -ms-overflow-style: none; /* 适配IE10+ */
  }
  iframe::-webkit-scrollbar {
    display: none; /* 适配Chrome、Safari等webkit内核浏览器 */
  }
</style>
  </head>
  <body>
  <div class="iframe-wrapper">
    <iframe class="embed-responsive-item" src="https://docs.google.com/spreadsheets/d/1zI3id8-Ba_DSA3Wc1ND45DaSjMl03HGw8Xay6J4dXBg/htmlembed?single=true&amp;gid=25834892&amp;range=A1:E100&amp;widget=false&amp;chrome=false" id="monitor" frameBorder="0" scrolling="no"></iframe>
  </div>

  <H1>Dito makikita ang buong detalye ng pasaherong inyong nakuha</H1>

  <div class="iframe-wrapper">
    <iframe class="embed-responsive-item" src="https://docs.google.com/spreadsheets/d/1zI3id8-Ba_DSA3Wc1ND45DaSjMl03HGw8Xay6J4dXBg/htmlembed?single=true&amp;gid=641312647&amp;range=A1:G&amp;widget=false&amp;chrome=false" id="monitor2" frameBorder="0" scrolling="no"></iframe>
  </div>

  </body>
</html>

额外说明：如果是嵌入谷歌表格，还可以直接调整iframe src链接中的range参数，控制返回的表格内容行数，让内容高度刚好匹配你设置的iframe高度，从根源上避免内容溢出。

内容的提问来源于stack exchange，提问作者Erwin Manalang