Prevent default scrolling in Vue Diagram component

16 Mar 20231 minute to read

If the Diagram’s size is greater than the screen size, the diagram scrolling will be enabled automatically instead of browser scrolling (diagram will not be focussed).

It can be prevented by defining the following code snippet in the diagram’s parent element. So that, you can prevent the browser scrolling when the diagram gets focused.

Step1

       let x, y;
       //Getting windows scrollX and Y
        function mouseDown() {
            x = window.scrollX;
            y = window.scrollY;
        }
        //Assigning the x and y points in window.scroll to method in mouseUp function
        function mouseUp() {
            window.scrollTo(x, y);
        }