Can I disable the scrollbars in CSS?

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

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

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?

You need to sign in to view this answers

Related Post