CODEWITHSUNDEEP
javascriptscrollmousewheelcesiumjs
Jose Gómez
Jose Gómez

Reputation: 3224

Disable mouse scroll wheel in Cesium

I have a map using Cesium via ol3-cesium. This map does not use the full space of the website. I am trying to disable scrollwheel zooming, so that I can keep scrolling up and down the web page with the mouse scroll wheel.

I can disable mouse scroll wheel zooming with:

map3d.getCesiumScene().screenSpaceCameraController.enableZoom = false;

However, that doesn't bring me back the normal page scrolling. The scrolling event seems to be captured by Cesium and not propagated.

How can I get Cesium to ignore or propagate the mouse scroll wheel to the browser, so that the user can scroll the page even if the cursor is on top of the map?

Upvotes: 2

Views: 1337

Answers (1)

Prete
Prete

Reputation: 97

Something like this should do the trick. Listen for the wheel event in the cesium container and when it happens, just scroll the window.

var pageStep = 25;
document.getElementById('yout-cesium-container-id').addEventListener("wheel", function(event) {
    if (event.deltaY < 0) {
        window.scroll(0, window.pageYOffset - pageStep);
    } else {
        window.scroll(0, window.pageYOffset + pageStep);
    }
});

You still need to disable the zoom in and out in Cesium.

map3d.getCesiumScene().screenSpaceCameraController.enableZoom = false;

Upvotes: 1

Related Questions