Repository navigation
fix(charts): scrolling over a chart scrolls the page - #568
Conversation
Plain mouse-wheel and trackpad scrolling over any chart no longer zooms it; the page scrolls instead. Ctrl+wheel (and trackpad pinch) still zooms, as do the zoom slider and touch pinch. - echarts-theme: stop plain wheel events before they reach any ECharts instance. ECharts swallows the wheel over inside dataZoom, geo roam and echarts-gl views whatever their options say, so this is the only place that covers every chart. - echarts-theme: on touch screens, inside dataZoom no longer swallows one-finger swipes, which intermittently blocked page scrolling on mobile. - Map2D: touch screens pinch-zoom only; one-finger drag scrolls the page instead of panning the map. Mouse drag still pans. - MultiLine: drop its explicit zoomOnMouseWheel override. Amp-Thread-ID: https://ampcode.com/threads/T-01a1c9ca-25ef-77a1-95a5-61b71ea16537 Co-authored-by: Sam Calder-Mason <samcaldermason@gmail.com>
![redpandabot[bot]](https://avatars.githubusercontent.com/in/3749543?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary
Replaces wheel-to-zoom with page scrolling by stopping plain wheel events at a capture-phase window listener in echarts-theme.ts, and makes touch roaming less grabby (preventDefaultMouseMove: false on hover-less devices, Map2D roam: 'scale'). The desktop wheel path checks out against the ECharts 6 sources; the touch path looks only half-fixed, since disabling preventDefaultMouseMove stops the preventDefault but not the dataZoom panning.
Issues
- 🟡
src/utils/echarts-theme.ts:11— mobile swipe still pans the dataZoom window while the page scrolls — see the thread on that line
Reviewed @ 5f249c25
A red panda's tail is nearly as long as its body — balance bar by day, blanket by night.
| registerTheme(ECHARTS_THEME, { | ||
| textStyle: { fontFamily: CHART_FONT_FAMILY }, | ||
| // On touch screens a one-finger swipe over a zoomable chart must scroll the page, not get swallowed | ||
| dataZoom: { preventDefaultMouseMove: globalThis.matchMedia?.('(hover: hover)').matches ?? true }, |
There was a problem hiding this comment.
🟡 mobile swipe still pans the dataZoom window while the page scrolls
In ECharts' RoamController _mousemoveHandler (echarts 6.0.0 dist echarts.js ~49230) preventDefaultMouseMove only guards stop(e.event); the pan trigger runs regardless, and touch is routed through the same mousedown/mousemove handlers with moveOnMouseMove: true. So on hover-less devices a one-finger swipe over a MultiLine chart (enableDataZoom) now scrolls the page and shifts the dataZoom range for as many touchmove events as the browser delivers, which the PR's mobile row (only 0px/scrolls measured) doesn't cover. I did not run a browser to see how much drift survives once the scroll gesture cancels the pointer stream.
Scrolling the mouse wheel or trackpad over a chart used to zoom it and stop the page from scrolling. Now the page scrolls.
zoomOnMouseWheel: falsestill callspreventDefault), soecharts-theme.ts, which every chart imports, stops plain wheel events before they reach any chart instance.preventDefaultMouseMove: falseon devices without hover), and Map2D pinch-zooms only, so a swipe over the world map scrolls the page instead of dragging the map. Pinch zoom still works on both.Checked on the dev server against the production backend with Playwright, on desktop at 1440px and on mobile emulation at 390px: