We've got a whole bunch of open issues related to scrolling, and I was about to make a new one about trying to detect when a scroll came from outside our plot - feels like we need a coherent strategy for addressing them all, or at least they should all be considered when trying to fix the others.
Open issues:
And the piece I'd like to add: On a scrollable page you can end up with your mouse over a scrollable (or scroll-zoom-enabled) plotly element just by scrolling the page without moving the mouse, then our element takes over the scroll events. This means for example:
- On a long page with a plot somewhere on it, you can be scrolling the page and then suddenly find yourself looking at a blank plot because you scrolled to zoom it out before you even had a chance to see it.
- On a page dense with plots (like a dashboard) it's hard to scroll at all - you have to squeeze your pointer over to the margin, or to the gutter between plots.
Proposal: what if we ignore scroll events on any element whose most recent mouseover event is not followed by a mousemove? Then you could confidently scroll a long page without worrying that somewhere in the middle your scroll will be hijacked by a plot, but then as soon as you move the mouse while it's over the plot, you've "engaged" with it and we pay attention to scroll. Of course it's not foolproof, it's easy to unintentionally create a small mousemove, especially with two-finger trackpad scrolling; we could imagine giving this effect a little slop using event.movement(X|Y) though this isn't supported in all browsers, so the solution had better work when that's missing.
Exploratory codepen just to verify what events happen when: https://codepen.io/alexcjohnson/pen/gQRyMb?editors=1011
This would only help partially for the dense dashboard case, you'd just need to make sure your pointer is over a non-scrollable item at the beginning of the scroll, not during the entire scroll.
I can't think of a way to extend this idea to touch...
If we were to do this, it would need to apply everywhere we use the scroll event - all subplot types, all components (cc #2054).
We've got a whole bunch of open issues related to scrolling, and I was about to make a new one about trying to detect when a scroll came from outside our plot - feels like we need a coherent strategy for addressing them all, or at least they should all be considered when trying to fix the others.
Open issues:
config.scrollZoom- done in: Make scrollZoom config option a flaglist #3422config.scrollZoomfixed in: Do not disable scrollZoom scroll{Width,Height} > client{Width,Height} #3424(did I miss any?) - done in: Table scroll #3327
And the piece I'd like to add: On a scrollable page you can end up with your mouse over a scrollable (or scroll-zoom-enabled) plotly element just by scrolling the page without moving the mouse, then our element takes over the scroll events. This means for example:
Proposal: what if we ignore scroll events on any element whose most recent
mouseoverevent is not followed by amousemove? Then you could confidently scroll a long page without worrying that somewhere in the middle your scroll will be hijacked by a plot, but then as soon as you move the mouse while it's over the plot, you've "engaged" with it and we pay attention to scroll. Of course it's not foolproof, it's easy to unintentionally create a smallmousemove, especially with two-finger trackpad scrolling; we could imagine giving this effect a little slop usingevent.movement(X|Y)though this isn't supported in all browsers, so the solution had better work when that's missing.Exploratory codepen just to verify what events happen when: https://codepen.io/alexcjohnson/pen/gQRyMb?editors=1011
This would only help partially for the dense dashboard case, you'd just need to make sure your pointer is over a non-scrollable item at the beginning of the scroll, not during the entire scroll.
I can't think of a way to extend this idea to touch...
If we were to do this, it would need to apply everywhere we use the scroll event - all subplot types, all components (cc #2054).