0

I have problem with "double scrolling"; This is screen from my app:

As you can see, the space for adding tables is surrounded by a scroll bar. I just need the scroll function to zoom in and out of my diagram, not to move it up and down. The current situation is that if I run my function that zooms in and out on the diagram, it also scrolls up or down. It makes such a double scroll which makes no sense.

Is it possible to turn off only the "scroll" function without turning off the scroll bars on the sides?

This is some code (my event wheel)(i am using library "MindFusion Diagramming"):

document.addEventListener('wheel', function (e) {
    var zoom = diagram.getZoomFactor();
    zoom -= e.deltaY / 35;
    if(zoom > 70 && zoom < 200 )
    {
        diagram.setZoomFactor(zoom);
    }
    //e.preventDefault();
});

And this is an error when I uncomment e.preventDefault () enter image description here

My divs (content is an area with scrollbars):

<div id="content" style="position: static; width: 1600px; height: 700px;"  >
        <!-- The Overview component is bound to the canvas element below -->
        <div style="position: absolute; right: 120px; width: 200px;
            height: 200px; border: 1px solid #ffffff; background-color: #c0c0c0;">
            <canvas id="overview" width="200" height="200">
            </canvas>
        </div>
    <!-- The Diagram component is bound to the canvas element below -->
    <div style="position: static; width: 100%; height: 100%; overflow: auto;">
        <canvas id="diagram" width="2100" height="2100">
            This page requires a browser that supports HTML 5 Canvas element.
        </canvas>
    </div>
</div>
Brarord
  • 611
  • 5
  • 18

2 Answers2

2

Try,

document.addEventListener('wheel', function (e) {
    e.preventDefault();
    var zoom = diagram.getZoomFactor();
    zoom -= e.deltaY / 35;
    if(zoom > 70 && zoom < 200 )
    {
        diagram.setZoomFactor(zoom);
    }
}, { passive : false});

reference: what are passive event listeners

vaku
  • 697
  • 8
  • 17
  • Man thanks! but I have one more question if you allow. Is it possible to zoom to where the cursor is? Or will it depend on the possibilities offered by the MindFusion library that I use? My javascript is really bad. // currently, zooming focuses on aiming for the upper left corner of the section. – Brarord Jan 03 '20 at 22:12
  • Really sorry buddy, I did not about `MindFusion` library :( – vaku Jan 03 '20 at 22:13
  • No problem maybe I can handle it. Thanks again! – Brarord Jan 03 '20 at 22:14
  • My pleasure ^_^ – vaku Jan 03 '20 at 22:21
  • I did it so now is the true happy ending. Code for future unfortunates: document.addEventListener('wheel', function (e) { e.preventDefault(); // do not use scrollbars PivotPoint.Point.x = diagram.pointerPosition.x; PivotPoint.Point.y = diagram.pointerPosition.y; var zoom = diagram.getZoomFactor(); zoom -= e.deltaY / 15; if(zoom > 70 && zoom < 200 ) { diagram.setZoomFactorPivot(zoom, PivotPoint.Point) } }, { passive : false}); – Brarord Jan 04 '20 at 01:59
1

I assume you overrode the scroll event to achieve your zoom functionality. You would need to call the preventDefault function on the event object you get in your event listener.

Edit: Your event listener is passive because scroll event listeners are usually disruptive to user experience. To register it as non-passive:

document.addEventListener('wheel', function (e) {
    var zoom = diagram.getZoomFactor();
    zoom -= e.deltaY / 35;
    if(zoom > 70 && zoom < 200 )
    {
        diagram.setZoomFactor(zoom);
    }
    e.preventDefault();
}, {passive: false});
Nicolas Guilbeault-Desjardins
  • 106
  • 4