Scroll position jumps when editor is inside of wrapper div

[zokioki]

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

[zokioki]

CC @coxandrew

[wmdmark]

Bump... I have the same issue. Any work-arounds for this?

[RyanV]

I can't reproduce this with the scrollingContainer set to html. It seems to function as expected.

tested with your codepen + Chrome Version 68.0.3440.106

[goggalore]

Yep, still experiencing this in 2019. Only happens when the editor is contained in a wrapper. Guess the workaround is not to use a wrapper, though this limits the ability to use something like a flexbox to contain the editor and toolbar, for example.
Any updates?

[li2go]

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

i have same problem

[vinitpradhn18]

Does anyone have a fix for this, yet?

[ImLuckyJr]

You can try it https://stackoverflow.com/a/45823484

[itsmhuang]

Having this issue as well. Setting scrollingContainer to html or wrapping div behaves the same: scroll jumps to top and back down.

[Doidel]

I have the same issue. Any updates?

[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.

[edwardcahyadi]

Facing the same issue, not being able to wrap the editor in a div is a big deal imo...

[Doidel]

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

componentDidMount()
{
$('.quill-toolbar').on("mousedown", function(event){
event.preventDefault();
event.stopPropagation();
});
}

[nazarposhta]

@Doidel looks like it works

[TristanJanicki]

If anyone is looking for a fix for this you can record the last selection range before your action that causes the scroll and then do quill.setSelection(index, length) and that fixes it (except the scroll is slightly off as it makes the selected text be the bottom of the scroll not say the middle)

[yasiinakbulut58]

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

componentDidMount()
{
$('.quill-toolbar').on("mousedown", function(event){
event.preventDefault();
event.stopPropagation();
});
}

this works but not for ql-tooltip (link, video, image..)

[akkayaburak]

this works but not for ql-tooltip (link, video, image..)

Same here.