能否用CSS禁用滚动条？弹窗场景下替代iframe的解决方案

我有一个Modal弹窗，点击图表即可触发显示。但弹窗出现时，页面仍能滚动（取决于屏幕/浏览器尺寸）。之前我通过iframe加载页面，再用DIV覆盖iframe的滚动条来解决，现在想知道能不能不用iframe，只通过少量CSS属性实现禁用滚动？

现有代码示例 #

JavaScript代码 #

bar = new RGraph.Bar({
  id: 'cvs',
  data: [8, 4, 6, 5, 3, 4, 5],
  options: {}
}).draw();

bar.canvas.onclick = function(e) {
  ModalDialog.show('string:<div style="text-align: center"><h1>This is a dialog!</h1><br /><button style="font-size: 20pt" onclick="ModalDialog.close()">OK</button></div>');
};

HTML代码 #

<!-- 引入RGraph相关核心库、ModalDialog库、柱状图库 -->
<script src="[RGraph核心库文件]"></script>
<script src="[RGraph ModalDialog库文件]"></script>
<script src="[RGraph柱状图库文件]"></script>

<canvas id="cvs" width="700" height="300"></canvas>

<p>
  tf ty fty fty f ty fty tf ty fty fty f ty fty tf ty fty fty f ty fty tf ty fty fty f ty fty tf ty fty fty f ty fty tf ty fty fty f ty fty tf ty fty fty f ty fty tf ty fty fty f ty fty tf ty fty fty f ty fty ... Add more text to force a ... scrollbar to appear
</p>

解决方案 #

无需iframe，通过CSS配合简单的JS逻辑即可实现：

1. 添加CSS样式 #

定义一个禁用滚动的类，作用于body：

.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

• overflow: hidden：直接隐藏滚动条并禁止页面滚动
• position: fixed + width: 100%：避免滚动条消失后页面出现横向偏移

2. 修改弹窗触发/关闭逻辑 #

在弹窗显示时给body添加禁用类，关闭时移除：

bar.canvas.onclick = function(e) {
  // 显示弹窗前禁用页面滚动
  document.body.classList.add('no-scroll');
  ModalDialog.show('string:<div style="text-align: center"><h1>This is a dialog!</h1><br /><button style="font-size: 20pt" onclick="closeModal()">OK</button></div>');
};

// 自定义关闭函数，恢复页面滚动
function closeModal() {
  ModalDialog.close();
  document.body.classList.remove('no-scroll');
}

这样弹窗弹出时页面滚动会被禁用，关闭弹窗后自动恢复滚动功能。

内容的提问来源于stack exchange，提问作者Richard