Question

我这里有一个带有 iframe 的 HTML 代码。如何禁用 iframe 的垂直滚动？我试图隐藏溢出和溢出，但它仍然对我不起作用。

<!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>
  .embed-responsive {
    height: 300px;
  }

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


  iframe#monitor2 {
    width: 100vw !important;
    height: 500px;
  }
</style>
  </head>
  <body>
  <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>

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

  <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"></iframe>

  </body>
</html>

Answer 1

<!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>
**<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">**
  <script>
  api.decorateCookedElement(post =>
post.querySelectorAll('div[data-theme-iframe="no-scroll"] iframe').forEach(iframe => {
  iframe.setAttribute('scrolling', 'no');
}),
{ 
  id: 'iframe-decorator',
  onlyStream: true,
}
  );
</script>
<style>
  .embed-responsive {
    height: 300px;
  }

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


  iframe#monitor2 {
    width: 100vw !important;
    height: 500px;
  }
</style>
  </head>
  <body>
 <div data-theme-iframe="no-scroll">
  <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>

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

  <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"></iframe>
<div>
  </body>
</html>

在 iframe 中隐藏垂直滚动

1 个答案: