在Iframe中隐藏垂直滚动



我这里有一个HTML代码与iframe。如何禁用iframe的垂直滚动?我试着让溢出和溢出y隐藏,但它仍然不为我工作。

<!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>

<!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>

最新更新