Scroll position jumps when editor is inside of wrapper div

Currently working on a project using Quill where we would like to have the toolbar be sticky as the user scrolls down the page (this provides a great experience for editing longer articles on both mobile and desktop).

The issue we’ve run into is that if the editor is wrapped inside another div, the scroll position jumps when editing the content, no matter how we configure the scrollingContainer:

Steps for Reproduction

The following pens were branched off the Auto-grow height example from Quill’s playground

• Setting scrollingContainer to a dedicated #scrolling-container element:

  • Visit https://codepen.io/coxandrew/pen/pKKvNj
  • Scroll down to the “Scroll down below this header” header
  • Select some text and make it a link
  • After you click “save”, the scroll position will jump all the way to the top

• Setting scrollingContainer to html:

  • Visit https://codepen.io/coxandrew/pen/qKYGJW
  • Scroll down to the “Scroll down below this header” header
  • Press enter multiple times, scroll position will jump down each time

• Works fine when editor is not wrapped inside a div:

  • https://codepen.io/coxandrew/pen/bKKbjr

Expected behavior:

Expected to not cause scroll position to jump when editor is inside a wrapper div and edits are performed.

Actual behavior:

Scroll position jumps up when scrollingContainer is set to a dedicated element, and down when set to html.

Platforms:

Browser	Operating System
Chrome 67.0.3396.87 (Official Build - 64-bit)	macOS 10.13.5 (High Sierra)

Version:

1.3.6

[Doidel]

But you can. The workaround on StackOverflow posted by ImLuckyJr helped me:

componentDidMount() { $(‘.quill-toolbar’).on(“mousedown”, function(event){ event.preventDefault(); event.stopPropagation(); }); }

[tsalmeida]

For anyone looking for a solution, I got it fixed by setting scrollingContainer to ‘html’. My problem was caused by setting the toolbar to ‘position: sticky’, so that it would be always visible.