Audrey-Ann commented on issue #10079:
URL: https://github.com/apache/echarts/issues/10079#issuecomment-4811310560
Until Echarts address this issue for a future release (hopefully soon <3)
I also came up with another workaround for **REACT** web applications where
the user uses the `shift` + wheel scroll to zoom inside the charts:
1. I created a custom hook which will registers a wheel listener on its own
canvas (see details in comment bellow)
2. Import and use that custom hook inside components that renders those
charts
```
import { RefObject, useEffect } from "react";
/**
* Lets the page scroll normally when the cursor is over an ECharts chart,
while keeping Shift+wheel
* as the zoom gesture.
*
* ECharts' inside dataZoom registers a wheel listener on its own canvas.
Even with
* `zoomOnMouseWheel: "shift"`, that listener swallows the wheel gesture
when Shift isn't held, so the
* page can't scroll until the cursor leaves the chart. This hook attaches a
capture-phase wheel
* listener on the container (an ancestor of ECharts' canvas, so it runs
first) and, when Shift isn't
* held, stops the event from propagating down to ECharts. It never calls
`preventDefault`, so the
* browser still performs its default page scroll. Shift+wheel is left to
propagate so zoom still works.
*/
const useChartWheelScrollPassthrough = (containerRef:
RefObject<HTMLDivElement | null>): void => {
useEffect(() => {
const container = containerRef.current;
if (!container) {
return;
}
const handleWheel = (event: WheelEvent): void => {
// No modifier → a page-scroll gesture: keep it away from ECharts so
the page scrolls.
if (!event.shiftKey) {
event.stopPropagation();
}
};
// capture: run before ECharts' (descendant) listener. passive: we never
preventDefault, so the
// browser keeps the default page scroll.
container.addEventListener("wheel", handleWheel, { capture: true,
passive: true });
return () => container.removeEventListener("wheel", handleWheel, {
capture: true });
}, [containerRef]);
};
export default useChartWheelScrollPassthrough;
```
```
// Chart.tsx
...
const chartContainerRef = useRef<HTMLDivElement>(null);
// Let the page scroll when the cursor is over the chart unless Shift is
held (Shift+wheel zooms).
useChartWheelScrollPassthrough(chartContainerRef);
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
