Quill: Scroll position is lost after pasting (with `scrollingContainer: null`)

[dcsaszar]

Steps for Reproduction

1. Visit https://codepen.io/anon/pen/geLExY
2. Scroll down a bit
3. Paste some text

Expected behavior:

Scroll position is unchanged, or keeps the text cursor visible.

Actual behavior:

The scroll position is at the top.
The text input cursor is not visible.

Platforms:

OSX High Sierra Chrome 65.0.3325.162

Version:

//cdn.quilljs.com/1.3.6/quill.js

[paulkoanui]

Also experiencing this issue using the following version through bower:

https://github.com/quilljs/quill/releases/download/v1.3.6/quill.tar.gz

[zhangcaidie]

I'm experiencing this issue too, it bothers me for two days, can somebody solve this problem?

[geeosh]

Yes, this issue still exists -- even after https://github.com/quilljs/quill/commit/f79705ca2dac6ed27015a00d8594ef11986bb0a7 was applied.

[askonomm]

Can confirm, still an issue

[clementmas]

Seems like a duplicate of #1374

This option fixed my scroll jump issue but it still flickers:
scrollingContainer: document.documentElement

[1002237913]

This is also a good solution

   function findEditorScrollContainer(quill) {
      let el = quill.root;
      while (el) {
        if (el.scrollTop > 0) {
          break;
        }
        el = el.parentElement;
      }
      return el;
    }

     quill.on('editor-change', (type, delta, oldDelta, source) => {
          quill.scrollingContainer = findEditorScrollContainer(quill); // Solve the problem of scrolling to the top when pasting
         // your others code

     });

[Filipeue]

This solution worked perfect in my case:
I cannot just set scrollingContainer: document.documentElement because i don't know where and how my editor will be used. So when creating Quill instance I try to find nearest scrolling element.

export function getScrollParent(node: HTMLElement | null): HTMLElement {
  if (!node) {
    return document.documentElement;
  }

  const overflowY =
    (node instanceof HTMLElement && window.getComputedStyle(node).overflowY) ||
    '';
  const isScrollable = !(
    overflowY.includes('hidden') || overflowY.includes('visible')
  );

  if (isScrollable && node.scrollHeight >= node.clientHeight) {
    return node;
  }

  return getScrollParent(node.parentNode as HTMLElement | null);
}

and use it like this when creating Quill instance (react+ts):

quill.current = new Quill(editorEl.current, {
    scrollingContainer: getScrollParent(editorEl.current),
});

also paste this in your css to remove flickering:

.ql-clipboard {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    opacity: 0;
}