我可以禁用 CSS 中的滚动条吗？

Question

我有一个模态对话框，您可以在此链接中看到：

https://codepen.io/rgraph/full/KKOyYYK

<script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.modaldialog.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.bar.js"></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>

<script>
    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>');
    };
</script>

现在，当您单击图表并显示对话框时，页面仍然可以滚动（取决于您的屏幕/浏览器大小）。

以前，我有一个 DIV，通过使用 iframe 显示页面来覆盖滚动条，然后包含 iframe 标记的页面显示对话框 - 然后覆盖 iframe 及其滚动条。

但是有没有一种方法可以在没有此 iframe 方法的情况下使用单个（或几个）CSS 属性禁用滚动？

Answer 1

当你的模态显示时，你可以使用以下JS：

 const body=document.body.style.overflow="hidden"

然后您可以在关闭模式时将行为重置为默认“滚动”。