Can I disable the scrollbars in CSS?

Question

I have a Modal dialog that you can see at this link:

https://codepen.io/rgraph/full/KKOyYYK (now updated with the resulting code!)

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 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>

Now, when you click the chart and show the dialog the page is still scrollable (depending on your screen/browser size).

Previously, I have had a DIV that covers the scrollbars by using an iframe to show a page and then the page that contains the iframe tag shows the dialog - which then covers the iframe and it's scrollbars.

But is there a way to disable scrolling with a single (or a few) CSS properties without this iframe method?

Answer 1

You could use the following JS when your modal shows:

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

then you can reset the behavior to default "scroll" when closing the modal.