处理iframe滚动条的关键在于区分宿主页面与内容页面的滚动机制，并针对不同场景灵活选用CSS、HTML属性或JavaScript方案。 无论你想隐藏滚动条、自定义样式，还是解决跨域造成的高度问题，核心思路都一样：先判断是否同域,再选择对应工具。
iframe滚动条怎么去掉？三种主流方法详解
大部分开发者搜索“iframe滚动条怎么去掉”，实际是想隐藏那个灰色矩形条，或避免嵌套页面出现双滚动条，下面三种方法覆盖了绝大多数场景,你可以根据实际情况选择。
CSS overflow:hidden
在同域下，最直接的办法是让iframe内部文档的body设置overflow: hidden，注意，不是设置iframe元素本身，而是设置它内部的内容页面，如果iframe和宿主页面同源,你可以在内容页CSS中写入：
body {
overflow: hidden;
}
同时确保iframe的宽高已经固定，不让内容撑破，如果内容真的超出，会直接截断,所以适合内容长度可控的场景。
HTML属性scrolling=”no”
传统属性scrolling="no"直接写在iframe标签上，告诉浏览器该iframe不需要滚动条，HTML5已废弃此属性，但大部分浏览器仍支持，只是移动端可能忽略。适合快速测试或临时方案，不建议作为长期依赖。
<iframe src="page.html" scrolling="no"></iframe>
通过JavaScript动态调整高度
让iframe高度自适应内容，是最优雅的去掉滚动条的方式，当内容高度变化时，动态更新iframe高度，滚动条自然消失,同域下的实现非常简单：
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
在iframe的onload事件中调用，对于跨域，需要借助postMessage通信,后面会详细讲。
方法对比：哪种更适合你的项目？
| 方法 | 适用场景 | 跨域支持 | 弊端 |
|——|———-|———-|——|页overflow:hidden | 同域，内容固定 | 仅同域 | 无法滚动查看超长内容 |
| scrolling=”no” | 快速隐藏 | 全部域 | 兼容性差，部分浏览器无效 |
| 高度自适应JS | 同域或跨域（需通信） | 同域直接，跨域需postMessage | 实现成本稍高 |
业内专家指出，对于长期维护的项目，高度自适应是最佳选择,用户体验最流畅。
iframe滚动条样式修改：自定义CSS滚条
当你想让iframe滚动条符合品牌风格，这就涉及“iframe滚动条样式修改”这个需求,你能修改的范围取决于是否拥有内容页的控制权。
页：修改内容页CSS
如果iframe内嵌的是自己网站的内容，直接为内容页写滚动条样式,以Chrome为例：
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}Firefox使用scrollbar-color和scrollbar-width。行业共识认为，WebKit伪元素更灵活,但需做好浏览器降级方案。
页：无法修改，但可模拟
跨域情况下，你无法操作内容页的DOM，但可以通过在iframe外包裹容器，隐藏容器滚动条，再监听iframe内部滚动事件来同步，但这非常复杂且不稳定。多数情况下，如果你需要第三方服务的滚动条样式与网站一致，最好向服务商确认是否支持自定义参数，或改用服务端渲染替代iframe。
安全考虑：sandbox属性影响滚动条
使用sandbox属性时，某些权限被限制，可能导致滚动条行为异常，sandbox=”allow-scripts”可能禁用滚动条，需要显式添加allow-modals或allow-popups等。如果你发现滚动条不显示，检查sandbox属性是否过度限制。
跨域iframe滚动条难题：自适应与通信
跨域问题是“iframe滚动条跨域”相关搜索的核心内容，嵌入第三方内容时，无法直接修改其样式,但可以通过沟通解决问题。
用postMessage实现高度自适应
这是最规范的做法，内容页加载完成后，通过postMessage发送自身高度到父页面，父页面收到消息后调整iframe高度，滚动条消失，内容完整显示。
页脚本：
function sendHeight() {
var height = document.body.scrollHeight;
window.parent.postMessage({ type: 'setHeight', height: height }, '');
}
window.addEventListener('load', sendHeight);
window.addEventListener('resize', sendHeight);
父页面脚本：
window.addEventListener('message', function(e) {
if (e.data.type === 'setHeight') {
document.getElementById('myIframe').style.height = e.data.height + 'px';
}
});
注意：postMessage的第二个参数不建议使用，应指定父页面域名,确保安全。
如果没有内容页修改权限
有些第三方服务提供了URL参数来控制高度，比如嵌入地图时可以指定height，你也可以考虑使用iframe的seamless属性（HTML5已废弃，但可能仍支持），最无奈的方案是接受滚动条,或者用代理页面在服务端获取内容后嵌入。
移动端优化：让iframe滚动条更友好
移动端屏幕小，iframe滚动条可能会占用宝贵空间,或者导致触摸滚动冲突。
使用-webkit-overflow-scrolling
在iOS上，为iframe容器添加-webkit-overflow-scrolling: touch可以提升滚动流畅度，但注意，这个属性作用于可滚动容器，而不是iframe本身，通常做法是把iframe包裹在一个div中，并设置overflow: auto和该属性。
.iframe-wrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
避免双层滚动
移动端最常见的错误是iframe内滚动和页面滚动冲突。一个简单的原则：让iframe高度等于内容高度，不产生内部滚动条，如果内容很长，宁可让用户滑动页面，也不要让iframe内部独立滚动,那样体验极差。
测试设备差异化
不同手机对iframe滚动条的支持差异很大，有些Android浏览器会一直显示滚动条，有些则自动隐藏。建议在主流浏览器上重点测试,并利用媒体查询对滚动条样式做微调。
从需求出发，选择最合适的方案
无论你遇到的是“iframe滚动条怎么去掉”还是“iframe滚动条样式修改”，根本之道都是理解滚动条从哪里来，以及你能否控制那个页面，同域时，CSS和JS都可以轻松搞定；跨域时，postMessage通信是你的主力工具。不要为了隐藏而隐藏，如果滚动条能帮助用户导航，就让它留着。
Q&A：iframe滚动条常见问题与解答
iframe滚动条怎么去掉但保留滚动功能？
使用CSS在WebKit浏览器中将滚动条宽度设为0（:-webkit-scrollbar { width: 0; }），同时保留内容可滚动，但Firefox不支持此方法，只能通过scrollbar-width: thin来减小宽度，无法完全隐藏，所以跨浏览器要实现完全隐藏滚动条且保持滚动,建议用高度自适应方案。
iframe滚动条样式修改会影响父页面吗？
不会，iframe内部的CSS作用域独立，不会影响父页面，但父页面的样式也不会影响iframe内部，除非两者同域且没有sandbox限制，若想统一风格,需分别修改两边的样式。
iframe滚动条不显示但内容被截断怎么办？
这是高度设置不当的典型表现，检查iframe的height属性，确保它等于或大于内容高度，如果无法预估，使用JavaScript动态设置高度，对于跨域，使用postMessage同步高度,或联系服务商提供自适应参数。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/558715.html
