html - 在 iframe 中隐藏垂直滚动
问题描述
我这里有一个带有 iframe 的 HTML 代码。如何禁用 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&gid=25834892&range=A1:E100&widget=false&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&gid=641312647&range=A1:G&widget=false&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&gid=25834892&range=A1:E100&widget=false&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&gid=641312647&range=A1:G&widget=false&chrome=false" id="monitor2" frameBorder="0"></iframe>
<div>
</body>
</html>
推荐阅读
- c++ - 从 AWS S3 存储桶下载文件
- jboss - Jboss cli条件列表添加
- azure - 服务器不可用时的 Azure 负载均衡器默认消息
- authentication - Demandware (Salesforce Commerce Cloud) 控制器身份验证
- docker - Docker Swarm Deploy 错误 - 找不到 Stack API 版本
- python - 从 discord.py 中的提及中获取用户 ID
- android - 在 Android 11 上,当我的应用连接到蓝牙扬声器麦克风时,其他应用无法播放音频
- python - Pytest Selenium Allure 报告:报告同一测试中的多个失败
- c# - 为什么 C++ 强制成员变量的初始化按照声明的顺序进行
- c - glibc 的 malloc 是一个弱符号?