Wheel while cursor is on draggable Html Overlay

CesiumJS
1

Hello !
I have multiple draggable html overlay blocks on my map.
But have a problem, when my cursor position is on one of the overlays , i can’t wheel-zoom my map. This working only if i add pointer-events:none to my overlays. But after that , my drag is not working.
Some solutions for this ?

2

Hi there,

I would recommend looking into event bubbling to understand how to address this.

The scroll event is a special case, which does not bubble through all elements, only the scrolled element and the top-level document. I would suggest adding a scroll event listener to the html overlay, preventing the default behavior, and triggering the scroll event on the Cesium viewer element instead.

1 Like
3

Thank you, i will try and reply in this topic on solution.

4

I did , how this looks in VUE :

  1. take event on vc-overlay-html
  2. preventDefault
  3. redirect event to canvas Cesium
<template>
  <vc-overlay-html
    @wheel="onRedirectWheelEvent"
    :position="position"
    :show="show"
    :draggable="draggable"
    custom-class="html-overlay-root"
    :pixel-offset="pixelOffset"
  >
    <slot></slot>
  </vc-overlay-html>
</template>

const onRedirectWheelEvent = (event) => {
  event.preventDefault();
  const newEvent = new WheelEvent("wheel", {
    deltaY: event.deltaY,
    deltaX: event.deltaX,
    deltaMode: event.deltaMode,
    clientX: event.clientX,
    clientY: event.clientY,
    screenX: event.screenX,
    screenY: event.screenY,
    ctrlKey: event.ctrlKey,
    shiftKey: event.shiftKey,
    altKey: event.altKey,
    metaKey: event.metaKey,
    bubbles: true,
    cancelable: true,
  });
  const canvas = document.querySelector("canvas");
  canvas.dispatchEvent(newEvent);
};

Thanks !

1 Like