Question 412703 in CSS Question posted in
Some basic documentation can be found here.

Can I disable the scrollbars in CSS?

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

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>

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    This code solves the issue by making the <canvas> responsive, which removes the horizontal scroll. The canvas element adjusts to the available screen width, thanks to setting the width: 100% and limiting the max-width to a specific value (700px in this example). This ensures that the canvas scales according to the screen size without overflowing horizontally.

    A vertical scroll may still appear if the content within the <body> exceeds the viewport height (vh), but it will only activate when there’s enough content to go beyond the visible area. The paragraph (<p>) here contains placeholder text, simulating this situation.

    Here’s a breakdown of the CSS for the responsive canvas:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    <style>
        /* Making the canvas responsive */
        #cvs {
            width: 100%;
            max-width: 700px;
            height: auto;
        }
    </style>
</head>
<body>

    <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>
        // Function to draw the responsive chart
        function drawResponsiveChart() {
            // Sets canvas dimensions based on available width
            const canvas = document.getElementById('cvs');
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clears the canvas

            // Defines the chart with data and options
            var bar = new RGraph.Bar({
                id: 'cvs',
                data: [8, 4, 6, 5, 3, 4, 5],
                options: {
                    hmargin: 5,
                    shadow: true,
                    colors: ['#5371FF'],
                    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
                }
            }).draw();

            // Sets the click action for the chart
            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>');
            };
        }

        // Event to redraw the chart when resizing the window
        window.addEventListener('resize', drawResponsiveChart);

        // Draws the chart for the first time
        drawResponsiveChart();
    </script>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search