当一个页面被嵌入到 another 页面的 iframe 内时，可能会出现 iframe 内有一个滚动条，所以在某些情况下，你可能需要去除此滚动条。
去除iframe内的滚动条
通过在 iframe 中添加 scrolling="no" 属性可以禁用滚动条：
<iframe src="example.html" scrolling="no"></iframe>
在上面的示例中，当页面在 iframe 中加载时，将禁用 iframe 的滚动条。
但是，请注意，scrolling="no" 属性已被 HTML5 标准废弃，并且在某些浏览器中可能不起作用。因此，使用 CSS 是更好和更可靠的方法。
可以在 CSS 中为 iframe 包含的文档设置一个样式，以禁用其滚动条：
<style>
iframe {
overflow:hidden;
}
</style>
<iframe src="example.html"></iframe>
在上面的示例中，我们通过设置 overflow 样式为 hidden 去除了 iframe 中的滚动条。此方式更为通用，在不同浏览器上的效果更为一致。
另外，还有一种方法利用 JavaScript 去掉 iframe 内的滚动条条。
<iframe id="my-iframe" src="example.html"></iframe>
<script>
let iframe = document.getElementById('my-iframe');
iframe.onload = function() {
let body = iframe.contentWindow.document.body;
body.style.overflow = 'hidden';
};
</script>
在上面的示例中，创建了一个带有指定 ID 的 iframe，然后在 iframe 加载完成后，使用 JavaScript 获取文档中的 <body> 元素，并将其样式中的 overflow 属性设置为 hidden，从而禁用了滚动条。
保留iframe内的滚动条
保留 iframe 内的滚动条是默认行为，只需要添加或者不添加 scrolling 属性即可。
<iframe src="example.html"></iframe>
在上面的示例中，当 iframe 中的文档内容大小超过 iframe 元素可以容纳的大小时，会在 iframe 中显示滚动条。
需要注意的是，这里默认情况下，仅当在嵌入页面 HTML 代码中未指定 scrolling 属性时才会显示滚动条。如果指定了 scrolling="no" 属性，则也会将滚动条禁用。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript中关于iframe滚动条的去除和保留 - Python技术站
微信扫一扫 
支付宝扫一扫 