Given that you have a large graph with vertical and horizontal scrollbars, while dragging the horizontal scrollbar, it stops working in a few cases:
If you mouse-wheel all the way to the top or bottom of the canvas window
If you drag all the way to the left, outside of the canvas window, and then use the mouse-wheel
I’m aware of the intended browser behavior where the opposite scrollbar becomes locked once you start using the scroll-wheel or shift + scroll-wheel, but I wasn’t sure because it seemed that for GoJS graphs, I could scroll + drag both scroll bars until I hit one of the cases above. So I would like confirmation if this is intended behavior?
I have not been able to reproduce a problem, but perhaps I do not understand exactly what your instructions are. When you “drag all the way to the left, …, and then use the mouse-wheel”, have you been keeping the mouse button down the whole time? But if you let go, the scroll wheel events still work normally.
Or maybe I just don’t understand what you mean by a locked scrollbar.
Apologies if I wasn’t clear, but yes, for both cases, this is if you’re holding down the horizontal scrollbar to drag the entire time. If it helps, I’ve attached a clip showing the behavior:
So the user while dragging the horizontal scrollbar simultaneously turns the mouse wheel.
A wheel event within the viewport, if treated as a scrolling event, causes the diagram to be scrolled and the event is not bubbled up to the rest of the page. When the diagram has been scrolled as far as it can, the wheel event does bubble up to the page. Normally this policy causes continual scrolling up in a page to scroll the page until there’s a diagram under the mouse, at which time the diagram is scrolled until it can’t be scrolled any more, after which it goes back to scrolling the page.
I wonder in your case if that causes the still ongoing horizontal scrollbar drag to be interrupted, since it’s now being scrolled vertically.
But I’m just guessing as to what’s going on. If I understand the situation that you are describing.
Thanks, I appreciate the insight into what might be going on. I’m still wondering, why is the user able to simultaneously drag the horizontal and mouse-scroll the vertical one before they hit one of the cases I described above? According to what I tried replicating (Edit fiddle - JSFiddle - Code Playground), this doesn’t seem to align with browser intended behavior.
I’ve tried with Chrome, Edge, Firefox, and Safari on Windows and Mac and and here’s what I found:
Chrome/Edge: The behavior I’ve been describing thus far
Firefox: The browser intended behavior seems to be that I’m able to drag and scroll both scrollbars freely, even after hitting the described cases. When tried with a GoJS graph, I cannot mouse-scroll the vertical scrollbar while I’m dragging the horizontal one unless the mouse is hovered directly over either scrollbar
Safari: I’ve observed the canvas window scrollbar behavior to be consistent to the browser intended behavior. That is, the user can freely scroll/drag both scrollbars
On a Mac, in your fiddle, the behavior is different between Firefox and Safari. Since it does not involve GoJS, I’m not sure we should make any changes.
I’ve noticed different scrollbar behaviors across browsers, but I’m also seeing differences between the JSFiddle example and a GoJS graph. Specifically, I’m wondering whether it might be possible to preserve the original scrollbar behavior shown in the JSFiddle example when interacting with a GoJS graph in any given browser?
