I have a (fixed) sidebar on the left, a (fixed) topbar, and a (vertical) scroller div in the middle
I have many blocks in my scroller div, including Prosemirror editor(s)
The problem I have is that when a part of an editor is not visible, if I move the cursor down Prosemirror it will scroll many elements that I don’t want to move, ending up in my topbar becoming hidden.
I don’t want the editors to have a fixed height and a vertical scroll either, because that would give me a double-scrollbar. So what I want (and it’s what I have already) is editors with a size automatically adapting according to the height of the content.
It doesn’t seem to have any stop condition, and will scroll to the root of the DOM, is that correct? Is there a way to specify a node as responsible for the scroll so scrolling stays within that node?
I tried to reproduce this by wrapping a ProseMirror editor in a scrollable div and making sure the outer page is scrollable, but I couldn’t – when I move the cursor out of view, only the inner div scrolls, not the the outer page.
Could you provide me with a (minimal, simple) HTML example that reproduces the issue?
Your page creates a situation where the cursor ends up outside the visible part of an overflow: hidden element. I think the solution is to adjust it so that that doesn’t happen (in the demo, somehow style the editor-wrapper element to not extend beyond the bottom of the window), since even if ProseMirror refrained from scrolling your element here, you’d end up with an unusable editor when the cursor becomes invisible.
Just make sure the scrollable container is itself entirely visible. I.e. in your demo, the scrollbar on the inner container goes off the bottom of the page (might be harder to see on platforms that hide scrollbars). That’s the problem.
Actually after testing with content editable, without prosemirror I have the same issue! So the scroll is not caused by prosemirror, it behaves this way with a vanilla contenteditable.
