How to disable scroll function?

Question

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

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>

uncomment e.preventDefault() and put it on the top of function definition. — vaku
– vaku, Commented Jan 3, 2020 at 21:58

vaku · Accepted Answer · 2020-01-03 22:06:50Z

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

answered Jan 3, 2020 at 22:06

vaku

7129 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Brarord Over a year ago

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.

vaku Over a year ago

Really sorry buddy, I did not about MindFusion library :(

Brarord Over a year ago

No problem maybe I can handle it. Thanks again!

vaku Over a year ago

My pleasure ^_^

Brarord Over a year ago

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});

Nicolas Guilbeault-Desjardins · Accepted Answer · 2020-01-03 22:07:47Z

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});

edited Jan 3, 2020 at 22:07

answered Jan 3, 2020 at 21:44

Nicolas Guilbeault-Desjardins

1064 bronze badges

4 Comments

A. Meshu Over a year ago

You should add code example in order for this to be an answer..

Nicolas Guilbeault-Desjardins Over a year ago

I would've left a comment but I don't currently have the required reputation points. I didn't leave any code because he didn't provide a snippet for me to insert the code into.

Brarord Over a year ago

Sorry guys, i just edited post. There is my event's code

Nicolas Guilbeault-Desjardins Over a year ago

Have you tried with the commented e.preventDefault then?

Collectives™ on Stack Overflow

How to disable scroll function?

2 Answers 2

5 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related